使用原生JavaScript制作一个漂亮的音乐播放器
2017-03-20 本文已影响2470人
xhr_bird
简单介绍
起初在简书上发现了这篇博客——【html、css、jq】制作一个简洁的音乐播放器。这是一个用jQuery库实现的音乐播放器，界面简约大气。
我在这个基础上，反其道而行，使用原生JavaScript实现。这个播放器是面向移动端的设备。在此感谢饥人谷和张新望，有了他们开路，使用原生的JS实现起来也并不费力。
- 音乐是通过豆瓣FM的API获取到的
- 界面类似于网易云音乐的样子
播放器的界面
怎么样，样式还可以吧？比较简单，最下面是可以操作的进度条和按钮，按钮从左至右依次是“显示歌词/隐藏歌词”、“切换频道”、“播放/暂停”、“下一曲”、“随机播放/单曲循环”。只有下一曲，没有上一曲，而且你永远不知道下一曲是啥，所以title就用了“与喜欢的音乐不期而遇”。
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>与喜欢的音乐不期而遇</title>
<link rel="shortcut icon" href="img/pic.jpg"/>
<link rel="stylesheet" type="text/css" href="css/html5-doctor-reset-stylesheet.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header>
<h1 class="song-title"></h1>
<div class="singer"></div>
</header>
<div class="content">
<div class="record-wrapper" style="display: block;">
<div class="record-bg mid">
<div class="record-pic mid">
</div>
</div>
</div>
<div class="lyrics-wrapper">
<ul class="lyrics"></ul>
</div>
</div>
<footer>
<div class="channel" data-channel-id=""></div>
<div class="progress-bar">
<div class="progress"></div>
<div class="progress-btn"></div>
</div>
<div class="btns">
<div class="show-lyrics icon-sides"></div>
<div class="change-channel icon-middle"></div>
<div class="play"></div>
<div class="next icon-middle"></div>
<div class="mode icon-sides"></div>
</div>
</footer>
<div class="glass">
<img>
</div>
<audio id="mic_audio"></audio>
<script src="js/original_ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>
</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++;
}
}
});
}
其他的部分，可以通过下载源码来查看。
