使用原生JavaScript制作一个漂亮的音乐播放器

简单介绍

起初在上发现了这篇博客——【html、css、jq】制作一个简洁的音乐播放器。这是一个用jQuery库实现的音乐播放器，界面简约大气。

我在这个基础上，反其道而行，使用原生JavaScript实现。这个播放器是面向移动端的设备。在此感谢饥人谷和张新望，有了他们开路，使用原生的JS实现起来也并不费力。

• 音乐是通过豆瓣FM的API获取到的
• 界面类似于网易云音乐的样子

播放器的界面

怎么样，样式还可以吧？比较简单，最下面是可以操作的进度条和按钮，按钮从左至右依次是“显示歌词/隐藏歌词”、“切换频道”、“播放/暂停”、“下一曲”、“随机播放/单曲循环”。只有下一曲，没有上一曲，而且你永远不知道下一曲是啥，所以title就用了“与喜欢的音乐不期而遇”。

• GitHub下载代码

HTML部分

    
        
        
        
        
        
        
        
        
    
    
        

            

            

        
        

            

                

                    

                        ![](img/pic.jpg)
                    
                
            
            

                

            
        
        

            

            

                

                

            
            

                

                

                

                

                

            
        
        

            
        
        

        
        
    

页面主要分为三部分，最上面的歌名和歌手名，中间的唱片和歌词，下面的操作面板，最下方，class为glass的div和img是整个页面的背景。

CSS部分

样式点击这里来看

JavaScript部分

js目录结构

这里面使用了一个flexible.js文件。这是rem布局（所以css文件里有好多单位是rem）为了多终端适配而增加的一个库。了解更多

还使用了一个original_ajax.js文件，封装一个ajax方法，用来发送Ajax请求

先把页面滚动禁掉（index.js）

    //取消body的touchmove默认行为，阻止页面滚动
    document.body.addEventListener('touchmove', function (event) {
        event.preventDefault();
    }, false);

original_ajax.js

 /* 封装ajax函数
    * @param {string}opt.type http连接的方式，包括POST和GET两种方式
   * @param {string}opt.url 发送请求的url
   * @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的
   * @param {object}opt.data 发送的参数，格式为对象类型
   * @param {function}opt.success ajax发送并接收成功调用的回调函数
   */
    function ajax(opt) {
        opt = opt || {};
        opt.method = opt.method.toUpperCase() || 'POST';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null;
        opt.success = opt.success || function () {};
        var xmlHttp = null;
        if (XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        var params = [];
        for (var key in opt.data){
            params.push(key + '=' + opt.data[key]);
        }
        var postData = params.join('&');
        if (opt.method.toUpperCase() === 'POST') {
            xmlHttp.open(opt.method, opt.url, opt.async);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
            xmlHttp.send(postData);
        }
        else if (opt.method.toUpperCase() === 'GET') {
            xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
            xmlHttp.send(null);
        } 
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                 opt.success(xmlHttp.responseText);
            }
        };
    }

获取频道和歌曲

    // 获取频道
    function getChannel () {
        ajax({
            method: 'GET',
            async: false,
            url: 'http://api.jirengu.com/fm/getChannels.php',
            success: function (response) {
                var jsonObj = JSON.parse(response);
                channelArr = jsonObj['channels'];
                getRandomChannel(channelArr);
                getMusic();
            }
        });
    }

    // 获取随机频道
    function getRandomChannel (channelArr) {
        var randomNum = Math.floor(channelArr.length * Math.random());
        var randomChannel = channelArr[randomNum];

        channel.innerHTML = randomChannel.name;
        channel.setAttribute('data-channel-id', randomChannel.channel_id);
    }

    // 获取音乐
    function getMusic () {
        ajax({
            method: 'GET',
            url: 'http://api.jirengu.com/fm/getSong.php',
            data: {
                "channel": channel.getAttribute("data-channel-id")
            },
            success: function (response) {
                var jsonObj = JSON.parse(response);
                var songObj = jsonObj['song'][0];

                songTitle.innerHTML = songObj.title;
                singer.innerHTML = songObj.artist;
                recordImg.src = songObj.picture;
                bigBg.src = songObj.picture;
                musicAudio.src = songObj.url;
                musicAudio.setAttribute('data-sid', songObj.sid);
                musicAudio.setAttribute('data-ssid', songObj.ssid);
                musicAudio.play();
                isLoading = false;
                getlyric();

                // 解决首次进入页面时，自动播放的兼容问题，不自动播放
                if (num === 1) {
                    musicAudio.onplaying = function () {
                        this.pause();
                        musicAudio.onplaying = null;
                    };
                    num++;
                }
            }
        });
    }

其他的部分，可以通过下载源码来查看。