js 音乐播放实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<title>手机音乐播放器</title>
<style>
      *{
         margin:0;
       padding:0;
      }
      #phone{
         width:353px;/*宽度*/
       height:600px;/*高度*/
       background-color:#000;
       margin:100px auto;/*上下为100px,左右居中*/
      }
      .top{
         width:353px;
       height:23px;
       background:url("image/1.png");
      }
      .menu{
        width:36px;
       height:30px;
       margin-left:6px;
       margin-top:-3px;
       cursor:pointer;
       float:left;
       position:absolute;
      }
      .title{
         width:353px;
       height:34px;
       background:url("image/2.png");
       color:#ccc;/*文本颜色*/
       font-size:24px;
       font-weight:bold;
       text-align:center;
       font-family:'kaiti';
       padding-top:10px;
      }
      .menuText ul{
         width:80px;
         margin-top:28px;
       position:absolute;
       display:none;
      }
      .menuText li{
         list-style:none;
       font-size:14px;
       text-align:left;
         line-height:20px;
       margin-left:8px;
       background-color:#668B8B;
       border-bottom:1px solid #ccc;
      }
      .singer{
         width:353px;
       height:34px;
       color:#ccc;/*文本颜色*/
       text-align:center;
         font-size:14px;
       line-height:34px;
      }
      .play{
         width:103px;
       height:103px;
       background:url("image/3.png");
       margin:30px auto;
       border-radius:50%;
       cursor:pointer;
      }
      .rotate{
         /*
       css3自定义动画：动画名称时间匀速运动无限重复
       */
         animation:rot 10s linear infinite;
      }
      .lrc{
         width:301px;
       height:315px;
       margin:auto;
         font-size:14px;
       color:#ccc;
         line-height:24px;
       text-align:center;
       overflow:hidden;/*超出隐藏*/
      }
      .context{
         position:relative;
      }
      /*关键帧控制每一帧*/
      @keyframes rot{
         from{
             transform:rotate(0deg);
       }
       to{
             transform:rotate(360deg);
       }
      }
      textarea{
      display:none;
      }
</style>
</head>

<body>
     <div id="phone">
        <div class="top">

       </div>
       <div class="title">
            <div id="menu" class="menu">
           </div>
           <div id="menuText" class="menuText">
                <ul>
                    <li>双笙 - 达拉崩吧</li>
                   <li>王俊凯 - 我在诛仙逍遥涧</li>
                   <li>张韶涵 - 传世之爱</li>
                   <li>龙梅子 - 又是春风里</li>
                   <li>辉子 - 你是哪一种</li>
               </ul>
           </div >
       <span id="MusicTitle">达拉崩吧</span>
       </div>
       <div class="singer"><span id="Player">双笙</span></div>
       <div class="play" id="play"></div>
       <div class="lrc" id="lrc">
          <div id="context" class="context">
          </div>
       </div>
   </div>
   <textarea id="text">
[ar:双笙]
[ti:达拉崩吧]
[00:00.32]双笙 - 达拉崩吧
[00:00.02]词：ilem
[00:00.03]曲：ilem
[00:00.04]改编词：海苔
[00:10.35]很久很久以前
[00:12.35]巨龙突然出现
[00:14.35]带来灾难
[00:15.72]带走了公主又消失不见
[00:18.39]王国十分危险
[00:20.32]世间谁最勇敢
[00:22.33]一位勇者赶来大声喊
[00:25.67]我要
[00:26.40]带上最好的剑
[00:28.38]翻过最高的山
[00:30.30]闯进最深的森林
[00:32.12]把公主带回到面前
[00:34.48]国王非常高兴
[00:36.30]忙问他的姓名
[00:38.32]年轻人想了想
[00:40.27]他说
[00:41.21]陛下我叫
[00:42.14]风流倜傥京城酒吧鸡王南梦华
[00:45.41]再来一次
[00:46.16]风流倜傥京城酒吧鸡王南梦华
[00:49.52]是不是
[00:50.07]风流倜傥京城酒吧鸡王南梦华
[00:53.64]对对
[00:54.14]风流倜傥京城酒吧鸡王南梦华
[01:14.54]英雄鸡王梦华
[01:16.34]骑上最快的马
[01:18.32]带着大家的希望
[01:20.37]从城堡里出发
[01:22.28]战胜怪兽来袭
[01:24.32]获得十二金币
[01:26.33]无数伤痕见证他慢慢升级
[01:30.42]偏远美丽村庄
[01:32.32]打开所有宝箱
[01:34.34]一路风霜伴随指引前路的圣月光
[01:38.32]闯入一座山洞
[01:40.34]公主和可怕巨龙
[01:42.28]英雄拔出宝剑
[01:44.30]巨龙说
[01:45.56]我是
[01:46.07]村头恶霸女装扶她卡通狗蛋龙
[01:49.42]再说一次
[01:50.11]村头恶霸女装扶她卡通狗蛋龙
[01:53.58]是不是
[01:54.10]满嘴龅牙像个西瓜喷火不倒翁
[01:57.59]不对是
[01:58.10]村头恶霸女装扶她卡通狗蛋龙
[02:17.91]于是
[02:18.25]风流倜傥京城酒吧鸡王南梦华
[02:21.65]砍向
[02:22.06]村头恶霸女装扶她卡通狗蛋龙
[02:25.57]然后
[02:26.06]村头恶霸女装扶她卡通狗蛋龙
[02:29.61]咬了
[02:30.08]风流倜傥京城酒吧鸡王南梦华
[02:33.56]最后
[02:34.06]风流倜傥京城酒吧鸡王南梦华
[02:37.43]他战胜了
[02:38.14]村头恶霸女装扶她卡通狗蛋龙
[02:41.51]救出了
[02:42.15]公主露娜貌美如花
[02:44.14]Hentai
[02:44.59]蘭香红
[02:45.56]回到了
[02:46.14]上游洗头一片绿色春意盎然城
[02:49.54]国王听说
[02:50.24]风流倜傥京城酒吧鸡王南梦华
[02:53.47]他打败了
[02:54.15]村头恶霸女装扶她卡通狗蛋龙
[02:57.52]就把
[02:58.05]公主露娜貌美如花
[03:00.03]Hentai
[03:00.60]蘭香红
[03:01.56]嫁给
[03:02.02]风流倜傥京城酒吧鸡王南梦华
[03:06.15]鸡王梦华
[03:07.11]公主露娜幸福得像个童话
[03:10.21]他们生下一个孩子也在天天渐渐长大
[03:14.19]为了避免以后麻烦
[03:16.01]孩子称作王浩然
[03:18.24]他的全名十分难念
[03:20.04]我不想说一遍

   </textarea>
   <audio src="Music/双笙 - 达拉崩吧.mp3" id="myMusic"></audio>
   <script type="text/javascript">
         /*
       业务需求：点击播放按钮，实现音乐的播放、暂停
             1.获取点击按钮标签及音频标签
           2、实现播放暂停功能
       */
       var oPlay=document.getElementById("play");
       var oMyMusic=document.getElementById("myMusic");
       var oLrc=document.getElementById("context");
       var html="";//用来存储歌词
       //2、实现播放暂停功能
       var onoff=true;//做一个开关来存储音乐的播放状态
       oPlay.onclick=function(){
           if(onoff){//如果onff为真就播放音乐
               oMyMusic.play();//播放音乐
               onoff=false;
               this.className="play rotate";
           }
           else{
                oMyMusic.pause();//暂停音乐
               onoff=true;
               this.className="play";
           }
       }
       //需求：歌词同步
       //1、获取歌词并添加到lrc中
        var text=document.getElementById("text").value;
                //console.log(text);
                 var arr=text.split("[");//从[处切割开
                 var context=document.getElementById("context");
                 var n=0;//用来存储播放了多少行
                 for(var i=0,len=arr.length;i<len;i++){
                     //console.log(arr[i]);
                     var lrc=arr[i].split("]");//从]处切割开
                     var times=lrc[0].split(".");
                     var time=times[0].split(":");
                     var cut=time[0]*60+time[1]*1;
                     //console.log(cut);
                     if(lrc[1]){
                        html+="<p id="+cut+">"+lrc[1]+"</p>"
                     }
                }
                oLrc.innerHTML=html;
          var aP=oLrc.getElementsByTagName("p");
       //2、歌词同步
       //2.1监听歌曲播放的进度
          oMyMusic.addEventListener("timeupdate",function(){
             //console.log(this.currentTime);//oMyMusic当前时间
           //console.log(parseInt(this.currentTime));//parseInt取整，去小数
           var curt=parseInt(this.currentTime);//根据音乐播放秒数来获取P标签的id
           if(document.getElementById(curt)){//存在
               //先把所有的都变为原来的颜色
               for(var i=0,len=aP.length;i<len;i++){
                    aP[i].style.color="#ccc";
                   aP[i].style.fontSize="14px";

               }
                document.getElementById(curt).style.color="red";
               document.getElementById(curt).style.fontSize="16px";
               //运用context的marginTop值，relative，overflow来实现歌词滚动
               if(aP[n+6]&&aP[n+6].id==curt){
                   context.style.marginTop=-24*n+"px";
                   n++;
               }
           }
           })
           //2.2监听歌曲播放完成
           oMyMusic.addEventListener("ended",function(){
             context.style.marginTop=0;
           this.currentTime=0;//当前时间改为0
           oPlay.className="play";
           onoff=true;
           })


   </script>
</body>
</html>

效果：

猜你喜欢