手把手教你编写一个音乐播放器

话不多说，直接看效果图：

代码如下：

  1.  
    <!doctype html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta name="Generator" content="EditPlus®">
  6.  
    <meta name="Author" content="">
  7.  
    <meta name="Keywords" content="">
  8.  
    <meta name="Description" content="">
  9.  
    <title>音乐播放器</title>
  10.  
    <style type="text/css">
  11.  
    *{
  12.  
    margin:0px;
  13.  
    padding:0px;}
  14.  
    #phone{
  15.  
    width:320px;
  16.  
    height:600px;
  17.  
    background:#000;
  18.  
    margin:100px auto;}
  19.  
    .top
  20.  
    {
  21.  
    width:320px;
  22.  
    height:23px;
  23.  
    background:url("images/1.png")
  24.  
    }
  25.  
    .tittle
  26.  
    {
  27.  
    width:320px;
  28.  
    height:30px;
  29.  
    background:url("images/2.png");
  30.  
    color:#fff;
  31.  
    text-align:center;
  32.  
    line-height:30px;
  33.  
    font-size:18px;
  34.  
    }
  35.  
    .singer
  36.  
    {
  37.  
    width:320px;
  38.  
    height:20px;
  39.  
    margin-top:5px;
  40.  
    line-height:20px;
  41.  
    font-size:16px;
  42.  
    color:#fff;
  43.  
    text-align:center;
  44.  
    }
  45.  
    .play
  46.  
    {
  47.  
    width:190px;
  48.  
    height:190px;
  49.  
    background:url("images/3.png");
  50.  
    border-radius:50%;
  51.  
    margin:20px auto;
  52.  
    }
  53.  
    .lrc{
  54.  
    width:300px;
  55.  
    height:280px;
  56.  
    margin:0px auto;
  57.  
    color:#ccc;
  58.  
    text-align:center;
  59.  
    overflow:hidden;}
  60.  
    .lrc p{
  61.  
    line-height:20px;}
  62.  
    #content{
  63.  
    position:relative;
  64.  
    top:0px;
  65.  
    }
  66.  
    .rotate{
  67.  
    animation:rot 5s linear infinite;}/*动画效果*/
  68.  
    @keyframes rot{
  69.  
    from{transform:rotate(0deg)}
  70.  
    to{transform:rotate(360deg)}
  71.  
    }
  72.  
    </style>
  73.  
    </head>
  74.  
    <body>
  75.  
    <div id="phone">
  76.  
    <div class="top"></div><!--顶部-->
  77.  
    <div class="tittle">晴天</div><!--歌曲名-->
  78.  
    <div class="singer">周杰伦</div><!--作者-->
  79.  
    <div class="play" id="play"></div><!--图片-->
  80.  
    <div class="lrc">
  81.  
    <div id="content"></div><!--存放歌词-->
  82.  
    </div>
  83.  
    </div>
  84.  
    <audio src="music/周杰伦-晴天.mp3" id="mymusic"></audio><!--音乐-->
  85.  
    <textarea id="text" style="display:none"><!--歌词-->
  86.  
    [ar:晴天 周杰伦]
  87.  
    [ti: 晴天 周杰伦 ]
  88.  
    [00:00.71]晴天 - 周杰伦
  89.  
    [00:28.84]故事的小黄花
  90.  
    [00:32.34]从出生那年就飘着
  91.  
    [00:35.85]童年的荡秋千
  92.  
    [00:39.41]随记忆一直晃到现在
  93.  
    [00:42.77]rui sou sou xi dou xi la
  94.  
    [00:45.50]sou la xi xi xi xi la xi la sou
  95.  
    [00:49.41]吹着前奏望着天空
  96.  
    [00:52.60]我想起花瓣试着掉落
  97.  
    [00:56.10]为你翘课的那一天
  98.  
    [00:58.29]花落的那一天
  99.  
    [01:00.14]教室的那一间
  100.  
    [01:01.79]我怎么看不见
  101.  
    [01:03.61]消失的下雨天
  102.  
    [01:05.38]我好想再淋一遍
  103.  
    [01:09.51]没想到失去的勇气我还留着
  104.  
    [01:15.72]好想再问一遍
  105.  
    [01:17.47]你会等待还是离开
  106.  
    [01:24.46]刮风这天我试过握着你手
  107.  
    [01:30.18]但偏偏雨渐渐大到我看你不见
  108.  
    [01:38.50]还要多久我才能在你身边
  109.  
    [01:44.93]等到放晴的那天也许我会比较好一点
  110.  
    [01:52.41]从前从前有个人爱你很久
  111.  
    [01:58.07]但偏偏风渐渐把距离吹得好远
  112.  
    [02:06.44]好不容易又能再多爱一天
  113.  
    [02:12.81]但故事的最后你好像还是说了拜拜
  114.  
    [02:33.93]为你翘课的那一天
  115.  
    [02:36.39]花落的那一天
  116.  
    [02:38.13]教室的那一间
  117.  
    [02:39.84]我怎么看不见
  118.  
    [02:41.55]消失的下雨天
  119.  
    [02:43.31]我好想再淋一遍
  120.  
    [02:47.39]没想到失去的勇气我还留着
  121.  
    [02:53.39]好想再问一遍
  122.  
    [02:55.49]你会等待还是离开
  123.  
    [03:02.46]刮风这天我试过握着你手
  124.  
    [03:08.12]但偏偏雨渐渐大到我看你不见
  125.  
    [03:16.54]还要多久我才能在你身边
  126.  
    [03:23.10]等到放晴的那天也许我会比较好一点
  127.  
    [03:30.49]从前从前有个人爱你很久
  128.  
    [03:36.26]但偏偏风渐渐把距离吹得好远
  129.  
    [03:44.48]好不容易又能再多爱一天
  130.  
    [03:51.05]但故事的最后你好像还是说了拜拜
  131.  
    [03:57.65]刮风这天我试过握着你手
  132.  
    [04:01.45]但偏偏雨渐渐大到我看你不见
  133.  
    [04:04.98]还要多久我才能够在你身边
  134.  
    [04:08.64]等到放晴那天也许我会比较好一点
  135.  
    [04:12.34]从前从前有个人爱你很久
  136.  
    [04:15.40]但偏偏雨渐渐把距离吹得好远
  137.  
    [04:19.05]好不容易又能再多爱一天
  138.  
    [04:22.42]但故事的最后你好像还是说了拜
  139.  
    </textarea>
  140.  
    <script type="text/javascript">
  141.  
    var oPlay=document.getElementById("play");
  142.  
    var myMusic=document.getElementById("mymusic");
  143.  
    var oText=document.getElementById("text");
  144.  
    var oCon=document.getElementById("content");
  145.  
    var mark=true;//标记音乐播放的状态
  146.  
    oPlay.onclick=function(){
  147.  
    if(mark){
  148.  
    myMusic.play();/*播放*/
  149.  
    this.className="play rotate";
  150.  
    mark=false;
  151.  
    }else{
  152.  
    myMusic.pause();/*暂停*/
  153.  
    this.className="play";
  154.  
    mark=true;
  155.  
    }
  156.  
    }
  157.  
    //获取歌词
  158.  
    var text=oText.value.split("[");//歌词从【切割开
  159.  
    //循环
  160.  
    var html="";
  161.  
    for(var i=0;i<text.length;i++){
  162.  
    var txt=text[i].split("]");
  163.  
    //console.log(txt[1]);
  164.  
    var times=txt[0].split(".");//从.的位置切割
  165.  
    //console.log(times);
  166.  
    var time=times[0].split(":");//从:的位置切割
  167.  
    //console.log(times);
  168.  
    var ct=time[0]*60+time[1]*1;
  169.  
    //console.log(ct);
  170.  
    //判断txt[1]是否存在
  171.  
    if(txt[1]){
  172.  
    html+="<p id="+ct+">"+txt[1]+"</p>"
  173.  
    }
  174.  
    }
  175.  
    oCon.innerHTML=html;
  176.  
    //获取所有的P
  177.  
    var xP=oCon.getElementsByTagName("p");
  178.  
    var n=0;
  179.  
    //console.log(html);
  180.  
    //监听歌曲的播放进度 歌词同步
  181.  
    myMusic.addEventListener("timeupdate",function(){
  182.  
    //当时间更新
  183.  
    var cur=parseInt(this.currentTime);
  184.  
    //console.log(cur);
  185.  
    if(document.getElementById(cur))
  186.  
    {
  187.  
    //先把所有的P标签颜色改为原色
  188.  
    for(var i=0;i<xP.length;i++){
  189.  
    xP[i].style.color="#ccc";
  190.  
    xP[i].style.fontSize="14px";
  191.  
    }
  192.  
    //当前P标签红色
  193.  
    document.getElementById(cur).style.color="red"
  194.  
    document.getElementById(cur).style.fontSize="18px"
  195.  
    if(xP[n+8].id==cur){
  196.  
    oCon.style.top=-20*n+"px";
  197.  
    n++;
  198.  
    }
  199.  
    }
  200.  
    })
  201.  
     
  202.  
    </script>
  203.  
    </body>
  204.  
    </html>

源码下载：点击这里

posted @ 2020-12-30 09:12  程序员宝典  阅读(941)  评论(0)  编辑  收藏  举报