【html、css、jq】制作一個簡潔的音樂播放器

這個播放器的音樂是通過豆瓣FM的API獲取到的，我們可以隨機的聽到豆瓣FM的任何音樂。(這些API是飢人谷的老師整理的)
DEMO
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();//播放
            }
        })
    };

  注意：豆瓣會限制我們的訪問，所以在<head>標簽下一定要添加<meta name="referrer" content="no-referrer">

  代碼三（進度條控制）：

    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())代碼讓瀏覽器預加載播放器。這里基本已經把播放器完成了，功能比較簡單。有興趣的同學可以自己再添加功能。

  PS：這個播放器最厲害的一點就是你永遠猜不到下一首歌是什么，是不是很吊？？？哈哈哈