Html+Css+JavaScript 打造个性音乐播放器

2021-07-24 10:00:56 阅读：594 来源： 互联网

标签：02 03 00 01 JavaScript height Html var Css

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的音乐播放器</title>
    <link rel="stylesheet" href="./Index.css">
</head>

<body>

    <textarea name="" id="txt" cols="30" rows="10" style="display: none;">
        [00:00.00]Lemon - 米津玄師 (よねづ けんし)
        [00:00.20]词：米津玄師
        [00:00.30]曲：米津玄師
        [00:01.60]夢ならば
        [00:02.50]どれほどよかったでしょう
        [00:06.96]未だにあなたのことを夢にみる
        [00:12.14]忘れた物を取りに帰るように
        [00:17.68]古びた思い出の埃を払う
        [00:26.13]戻らない幸せがあることを
        [00:31.43]最後にあなたが教えてくれた
        [00:36.93]言えずに隠してた昏い過去も
        [00:42.53]あなたがいなきゃ
        [00:44.91]永遠に昏いまま
        [00:48.67]きっともうこれ以上
        [00:51.15]傷つくことなど
        [00:53.80]ありはしないとわかっている
        [00:58.54]あの日の悲しみさえ
        [01:01.28]あの日の苦しみさえ
        [01:04.11]そのすべてを愛してた
        [01:07.04]あなたとともに
        [01:09.64]胸に残り離れない
        [01:12.59]苦いレモンの匂い
        [01:15.65]雨が降り止むまでは帰れない
        [01:21.30]今でもあなたはわたしの光
        [01:37.93]暗闇であなたの背をなぞった
        [01:43.16]その輪郭を鮮明に覚えている
        [01:48.78]受け止めきれないものと
        [01:51.81]出会うたび
        [01:54.24]溢れてやまないのは涙だけ
        [02:00.37]何をしていたの
        [02:02.81]何を見ていたの
        [02:05.58]わたしの知らない横顔で
        [02:10.66]どこかであなたが今
        [02:13.12]わたしと同じ様な
        [02:15.92]涙にくれ
        [02:17.31]淋しさの中にいるなら
        [02:21.41]わたしのことなどどうか
        [02:24.67]忘れてください
        [02:27.48]そんなことを心から願うほどに
        [02:33.17]今でもあなたはわたしの光
        [02:41.76]自分が思うより
        [02:46.96]恋をしていたあなたに
        [02:52.37]あれから思うように
        [02:58.00]息ができない
        [03:03.58]あんなに側にいたのに
        [03:08.97]まるで嘘みたい
        [03:14.18]とても忘れられない
        [03:19.80]それだけが確か
        [03:30.69]あの日の悲しみさえ
        [03:33.16]あの日の苦しみさえ
        [03:35.87]そのすべてを愛してた
        [03:38.67]あなたとともに
        [03:41.27]胸に残り離れない
        [03:44.41]苦いレモンの匂い
        [03:47.29]雨が降り止むまでは帰れない
        [03:52.83]切り分けた果実の片方の様に
        [03:58.39]今でもあなたはわたしの光 
    </textarea>

    <!-- 架子 -->
    <article class="photo">
        <div class="title">Lemon</div>
        <div class="singer">米津玄师</div>
        <div class="play"></div>
        <div class="lrc">
            <div class="content"></div>
        </div>
    </article>

    <audio id="myMusic" src="./content/flac/Lemon.flac">
        您的浏览器不支持音频播放！！！！
    </audio>

</body>
<script src="./Index.js"></script>
</html>

index.css

*{
    margin: 0;
    padding: 0;
}

.photo{
    width: 320px;
    height: 600px;
    background: linear-gradient(180deg,#ead6ee,#a0f1ea)fixed;
    margin: 50px auto;
    font-size: "微软雅黑 Light";
    color: #2c606d;
    border-radius: 5px;
    box-shadow: 0 0 7px #ead5ee;
    overflow: hidden;
}

.title{
    margin-top: 5px;
    width: 100%;
    height: 70px;
    font-size: 32px;
    text-align: center;
    line-height: 70px;
}

.singer{
    width: 100%;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
}

.play{
    width: 152px;
    height: 163px;
    background-image: url("./content/img/index.png");
    background-repeat: no-repeat;
    margin: 20px auto;
}

.lrc{
    width: 100%;
    height: 220px;
    margin: 50px auto;
    text-align: center;
    overflow: hidden;
}

.lrc p{
    line-height: 20px;
    font-size: 15px;
}

.content{
    position: relative;
}

.play.rotate{
    -webkit-animation: rot 5s linear infinite;
    animation: rot 5s linear infinite;
}

@keyframes rot{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

index.js

var btn = document.getElementsByClassName("play")[0]
var myMusic = document.getElementById("myMusic")
var txt = document.getElementById("txt")
var con = document.getElementsByClassName("content")[0]
var mark = true

btn.onclick = function(){
    if(mark){
        this.className += " rotate"
        myMusic.play()
        mark = false
    }else{
        this.className = "play"
        myMusic.pause()
        mark = true
    }
}

var lrc = txt.value
var lrcArr = lrc.split("[")
var html = ""
for(var i=0; i < lrcArr.length ; i++){
    var arr = lrcArr[i].split("]")
    var time = arr[0].split(".")
    var timer = time[0].split(":")
    var ms = timer[0] * 60 + timer[1] * 1
    var text = arr[1]
    if(text){
        html += "<p id=" + ms +">" + text + "</p>"
    }

    con.innerHTML = html
}

var num = 0
var oP = con.getElementsByTagName("p")
myMusic.addEventListener("timeupdate",function(){
    var curTime = parseInt(this.currentTime)   //视频当中把currentTime写成了curTime,,,,,,,
    if(document.getElementById(curTime)){
        for(var i=0; i < oP.length ; i++){
            oP[i].style.cssText = "font-size: 15px;"   
        }
        document.getElementById(curTime).style.cssText = "background: linear-gradient(-3deg,#eebd89 0%,#d13abd 100%);-webkit-background-clip: text;color: transparent;font-size: 20px;"
        if(oP[ 7 + num].id == curTime){
            con.style.top = -20 * num + "px"
            num ++
        }
    }
})

在这里插入图片描述

标签：02,03,00,01,JavaScript,height,Html,var,Css
来源： https://blog.csdn.net/weixin_43898383/article/details/119053207

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Html+Css+JavaScript 打造个性音乐播放器