心血来潮就用h5的新标签写了个简单的音乐播放器，实现的过程还是很简单的，对于前端来说最难的部分应该是让音乐盒歌词同步了吧。下面简单的说一下实现的步骤吧！
先看一下成品的图片吧：
这里写图片描述
一. 首先去网站下一些lrc歌词文件，一定要和歌曲的版本对应，不然是不会同步的。
二. 解析lrc文件
这一步是很重要的，由于js只能通过事件来上传文件（点击input[type=file]按钮），所以我们不能直接从客户端来获取文件，只能通过服务器来获取相应的lrc文件的内容，所以就要用ajax请求来获取lrc文件的信息。代码如下：
//从服务器获得歌词
function getLyrics(url){
var req = getRequest();
req.open("get", url, true);
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded; charset=utf-8");
req.onreadystatechange = function (){
if (req.readyState == 4){
var lyrics = req.responseText;
if (lyrics != 'error') {
parseLyrics(lyrics); //请求成功后解析歌词
create_lyrics(); //让歌词显示在页面上
}
else{
create_noLyrics(); //歌词不存在时显示
}
}
};
req.send();
}
//歌词对象
var lyricsobj = {
song: {
name: '',
lrcTimeArray: [],
lrcArray_line: []
}
};
//对歌词进行解析
function parseLyrics(lyrics){
var lyrics_self = lyrics;
//获取歌词内容，后台用'\n'换行，所以用'\n'分隔字符串
var lrcArray = lyrics_self.split("\n");
//初始化让数组为空，分别存储歌词和时间点
lyricsobj.song.lrcArray_line.length = 0;
lyricsobj.song.lrcTimeArray.length = 0;
for (var i = 0; i < lrcArray.length; i++){
var lrcVal = lrcArray[i].replace(/[dd:dd.dd]/g,":");
var str = lrcVal.substr(1, 8).split(':');
var seconds = 0;
seconds = parseInt(str[0])*60 + parseInt(str[1]);
var lyrics_line = lrcVal.substring(10);
if (i == 0) {
lyricsobj.song.name = lyrics_line;
}
lyricsobj.song.lrcArray_line.push(lyrics_line);
lyricsobj.song.lrcTimeArray.push(seconds);
}
}
三. 接下来就是如何让歌词随着音乐滚动了
//让歌词滚动
function scroll_lyrics(){
var audio = document.getElementById("audio");
var timelist = lyricsobj.song.lrcTimeArray;
var lyricslist = lyricsobj.song.lrcArray_line;
var p = document.getElementsByTagName('p');
for (var i = 0; i < timelist.length; i++){
if (timelist[i] <= audio.currentTime + 0.5) {
if (i > 0) {
p[i - 1].style.color = 'white';
}
p[i].style.color = 'yellow';
var ptop =p[i].offsetTop; //获得当前歌词距离浏览器顶部的距离
var parent = p[i].parentNode.offsetTop; //获得滚动窗口距离浏览器的距离
var parentScroll = p[i].parentNode.scrollTop; //获得滚动窗口的滚动距离
if (ptop - parent - parentScroll > 220){ //比较当前歌词距离滚动窗口顶部的距离，大于220，就让窗口滚动20，根据自己的布局设置
p[i].parentNode.scrollTop = p[i].parentNode.scrollTop + 50;
}
else{
//控制让当前歌词显示在中间，根据自己的布局设置
p[i].parentNode.scrollTop = ptop - parent - 220;
}
}
}
}
这里主要用到了组件距浏览器的距离，可以根据自己的布局进行调整，但是有一点是不变的。设歌词到浏览器的距离是x，歌词的容器到浏览器的距离为y，容器滚动的距离为z，所以歌词距离容器顶端的距离就为：d = x - y - z。
四. 选择要听的歌
//点击列表选择要播放的歌曲
function choice_song(e){
var audio = document.getElementById("audio");
var elem = e.target;
audio.src = 'static\\Music\\'+ elem.id +'.mp3';
var url = '/lyrics?name='+ elem.id;
document.getElementById("currentSong").innerHTML = elem.innerHTML;
getLyrics(url);
}
这里很简单，获得歌名发给服务器就ok了。
实现的步骤大概就是这样，后台的代码就不贴了，比较简单，如果感兴趣可以自己动手写个的，github地址：https://github.com/lwjcode/Music-player
觉得可以可以下下来参考哦，给个星也是很棒的！哈哈。
