HTML5+Ajax實作音樂播放器

本文播放器的音樂是通過豆瓣FM的API擷取到的。Demo美觀簡單，可自行擴充其功能。

播放器的音樂是通過豆瓣FM的API擷取到的，我們可以随機的聽到豆瓣FM的任何音樂。(這些API是饑人谷的老師整理的)，音樂播放器美觀如圖：

html+js源代碼

css源代碼

公衆号回複：音樂播放器

html部分

代碼：

<div class="wrapper">
    <!-- 背景圖檔 -->
     <div class="background"></div>
     <div class="content">
         <audio src=""></audio>
         <div class="music-massage">
             <p class="musicname"></p>
              <p class="musicer"></p>
          </div>
        <!-- 分享，收藏，喜歡按鈕 -->
        <div class="music-icon">
          <a class="m-icon m-fenxiang colored" href="http://service.weibo.com/share/share.php?title=#_loginLayer_1466697157538" target="new"></a>
          <span class="m-icon m-star colored"></span>
          <span class="m-icon m-heart colored"></span>
        </div>
     </div>
     <!-- 進度條 -->
      <span class="basebar">
          <span class="progressbar"></span>
      </span>
      <div class="controls">
      <!-- 音樂播放。換頻道，下一曲按鈕 -->
       <div class="play-control">
            <span class="m-icon m-play btn1" title="播放/暫停"></span>
            <span class="m-icon m-change btn2" title="換頻道"></span>
           <span class="m-icon m-next btn3" title="換曲"></span>
       </div>
       <!-- 循環播放，随機播放按鈕 -->
        <div class="music-control">
            <span class="m-icon m-xunhuan colored"></span>
            <span class="m-icon m-radom colored"></span>
        </div>          
      </div>
  </div>
           

這裡就不寫css的代碼了，大家可以直接看源檔案或者從開發者工具中去看。如果有問題可以私聊我。

js部分

代碼一（播放控制）：

//播放控制
          var myAudio = $("audio")[0];
          // 播放/暫停控制
          $(".btn1").click(function(){
              if (myAudio.paused) {
                  play()
              } else {
                  pause()
              }
          });
          // 頻道切換
          $(".btn2").click(function(){
              getChannel();
          });
          // 播放下一曲音樂
          $(".btn3").click(function(){
              getmusic();
          });
          function play(){
              myAudio.play();
              $('.btn1').removeClass('m-play').addClass('m-pause');
          }
          function pause(){
              myAudio.pause();
              $('.btn1').removeClass('m-pause').addClass('m-play');
          }
           

代碼二（ajax擷取豆瓣fm音樂）：

//擷取随機頻道資訊
       function getChannel(){
           $.ajax({
               url: 'http://api.jirengu.com/fm/getChannels.php',
               dataType: 'json',
               Method: 'get',
               success: function(response){
                   var channels = response.channels;
                   var num = Math.floor(Math.random()*channels.length);
                   var channelname = channels[num].name;//擷取随機頻道的名稱
                   var channelId = channels[num].channel_id;//擷取随機頻道ID
                   $('.record').text(channelname);
                   $('.record').attr('title',channelname);
                   $('.record').attr('data-id',channelId);//将頻道ID計入data-id中
                   getmusic();
               }
           })
       }
       // 通過ajax擷取歌曲
       function getmusic(){
           $.ajax({
               url: 'http://api.jirengu.com/fm/getSong.php',
               dataType: 'json',
               Method: 'get',
               data:{
                     'channel': $('.record').attr('data-id')
                   },
               success: function (ret) {
                  var resource = ret.song[0],
                      url = resource.url,
                      bgPic = resource.picture,
                      sid = resource.sid,//擷取歌詞的參數
                      ssid = resource.ssid,//擷取歌詞的參數
                      title = resource.title,
                      author = resource.artist;
                  $('audio').attr('src',url);
                  $('.musicname').text(title);
                  $('.musicname').attr('title',title)
                  $('.musicer').text(author);
                  $('.musicer').attr('title',author)
                  $(".background").css({
                       'background':'url('+bgPic+')',
                       'background-repeat': 'no-repeat',
                       'background-position': 'center',
                       'background-size': 'cover',
                   });
                  play();//播放
               }
           })
       };
           

注意：豆瓣會限制我們的通路，是以在

标簽下一定要添加

代碼三（進度條控制）：

setInterval(present,500)    //每0.5秒計算進度條長度
     $(".basebar").mousedown(function(ev){  //拖拽進度條控制進度
        var posX = ev.clientX;
        var targetLeft = $(this).offset().left;
        var percentage = (posX - targetLeft)/400*100;
         myAudio.currentTime = myAudio.duration * percentage/100;
       });
       function present(){
          var length = myAudio.currentTime/myAudio.duration*100;
           $('.progressbar').width(length+'%');//設定進度條長度
              //自動下一曲
           if(myAudio.currentTime == myAudio.duration){
              getmusic()
              }           
        }
           

HTML5中audio标簽本身提供進度條功能，以及音量控制功能的，這裡我為了界面的好看自己設定了進度條，音量控制還沒有加，大家可以自行添加。歌詞資訊擷取方式：

http://jirenguapi.applinzi.com/fm/getLyric.php?ssid=4f86&sid=1451876

這裡的sid&ssid擷取歌曲資訊可以得到。

然後我們需要在js檔案結尾加上$(document).ready(getChannel())代碼讓浏覽器預加載播放器。這裡基本已經把播放器完成了，功能比較簡單。有興趣的同學可以自己再添加功能。

原文釋出時間為：2018-07-19

本文作者：張新望zxw

本文來自雲栖社群合作夥伴“

Web項目聚集地

”，了解相關資訊可以關注“

”。