碼上歡樂
相關內容    簡體    繁體

手把手教你編寫一個音樂播放器

本文轉載自   查看原文   2020-12-30 09:12   367 

話不多說，直接看效果圖：

代碼如下：

  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>

源碼下載：點擊這里


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 手把手從零開始---封裝一個vue視頻播放器組件 手把手教你給VC++編寫插件 手把手教你編寫Logstash插件 手把手教你編寫一個具有基本功能的shell（已開源） 手把手教你實現一個完整的 Promise 手把手教你寫一個java的orm（一） 手把手教你搭建一個Elasticsearch集群 手把手教你發布一個Python包 手把手教你寫一個RPC 手把手教你實現一個 AdaBoost
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM