html5 音乐播放器 静态,用HTML5audio组件实现一个音乐播放器

心血来潮就用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

觉得可以可以下下来参考哦，给个星也是很棒的！哈哈。