简单介绍

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

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

音乐是通过豆瓣FM的API获取到的

界面类似于网易云音乐的样子

播放器的界面

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

HTML部分

与喜欢的音乐不期而遇

页面主要分为三部分，最上面的歌名和歌手名，中间的唱片和歌词，下面的操作面板，最下方，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++;

}

}

});

}

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