HTML5挪动端音乐播放器（发蒙篇）

这段时刻公司一直在做一个PC的教育类单页运用，巨大庞杂，触及异常多H5的学问，音频就是个中的一部分。前些天偷台风的闲暇时写了一个挪动端音乐播放器，作为练手项目。

在线地点：请猛击这里
源码：请猛击这里

注重：运用PC阅读最好翻开挪动装备情势，运用挪动装备阅读须要封闭无痕阅读情势（不然没法运用当地存储，平常阅读器都是默许不开启），项目须要在当地服务器或线上服务器运转，以file:///情势的地点翻开是没法举行ajax要求的，从而没法看到音乐数据。

• 播放器的基本操纵，上一首，下一首(递次播放、随机播放、单曲轮回)，播放停息，滑动时刻轴的歌词定位

• 初始handlebar模板衬着音乐列表数据，下拉转动加载音乐列表数据。

• 歌曲列表可增加喜欢音乐，于下次革新时更新喜欢音乐列表，基于HTML5当地存储。

• 规划采纳rem规划，自适应挪动端手机装备。

• iconfont在线图标运用的运用

css：寄存款式文件
lib： 寄存大众剧本库
js： 寄存项目剧本文件
img： 寄存图片
fonts： 项目字体文件
res： 项目音乐资本
ui：项目ui文件（psd）

// ============================设置变量================================
var rootPath = window.location.href.replace(/\/\w+\.\w+/, "/");
var Settings = {
playmode: 0, //0列表轮回，1随机，2为单曲轮回
volume: 0.5, //音量
initNum: 10, //列表初始化歌曲数
reqNum: 10 //后续要求歌曲数
};
// ============================东西函数================================
var Util = (function() {
return {
}
})()
// ============================Dom选择器================================
var Dom = {
}
// ============================全局变量================================
var winH = $(window).height();
var sOngNum= 0; //当前列表歌曲数量
var lrcHighIndex = 0; // 歌词高亮索引
var lrcMoveIndex = 0; // 歌词挪动单元索引
var moveDis = 0; // 单句歌词每次挪动间隔
var duration = 0; // 当前歌曲的时刻
var index = 0; //当前播放歌曲的索引
var sOngInfo= null; // 当前歌曲信息
var sOngModelUI= null; // 当前歌曲UI模子
var timeArr = []; //当前歌曲时刻数组
var formatTimeArr = []; //当前歌曲时刻数组(花样化为秒数)
// ============================进口函数================================
function main() {
initUIFrame();
var initModel = PlayerModel();
var sOngListUI= ModelUIFrame(Dom.songListContainer);
var lsOngListUI= ModelUIFrame(Dom.lSongListContainer);
initModel.getSongList("data/data.json", function(data) {
// 天生一切歌曲列表
songListUI.renderList(data, 0, null, function() {
songListUI.updateList();
});
// 天生喜欢歌曲列表
initModel.getLoveSongArr(function(lSongArr) {
lsongListUI.renderList(data, 1, lSongArr);
});
// 增加动画
Util.addAnimationDelay(Dom.song);
// 保留歌词数据
initModel.saveLyric(data);
});
EventHandler();
}
// ============================初始化UI函数================================
function initUIFrame() {
}
// ============================完成数据交互要领================================
function PlayerModel() {
}
// ============================模子动态UI模块================================
function ModelUIFrame(container) {
}
// ============================事宜绑定模块================================
function EventHandler() {
}
// 挪用进口函数
main();功用点详解

Handlebar.js初次衬着及转动加载

运用前端模板长处是把数据和构造分离出来，代码更清楚。但厥后发明handlerbar.js好像没法在js中示例模板对象，而html中的handlebar在初次进入页面便会被编译了，因而后续增加音乐照样采纳传统的拼接字符串的体式格局，假如你有更文雅的动态加载体式格局，迎接议论交换。

html:handlebars模板包含在script标签当中而且type范例为”text/x-handlebars-template”，在初始化页面的时刻依据js猎取数据植入后就衬着出响应的html。

js:

function renderAllList(data) {
var preTpl;
var lsOngArr= Util.getItem('lsonglist') === null ? [] : JSON.parse(Util.getItem('lsonglist'));
// 天生列表
if (!sListTpl) {
// 后续动态天生歌曲
var tpl = "";
var sOngIndex= songNum;
$.each(data, function(index, el) {
if (index >= songIndex && index tpl += "

rem规划自适应计划

大体上指的是html根元素上定义一个字体大小，然后css款式定义时运用rem作为单元，包含margin、paddding、用于相对定位的单元等等。然后js依据手机装备的屏幕大小，转变根字体的大小，如许全部页面也会随着响应的减少或放大。
更多详解，请看这一篇文章《挪动端自适应规划解决计划——rem》，您能够猛击这里跳转。

关于歌词的同步计划完成

现在音乐播放器的歌词同步显现大概有两种，一种是准确到单个笔墨，一种是准确到单行歌词。本文完成的是第二种。

团体完成思绪

页面初始化时，要求歌曲数据json（当地json文件模仿），个中歌名、歌手、图片等按需衬着到html中，将歌词存储到localStorage中。此时，F12翻开chrome调试器，进入Application-LocalStorage能够看到：

点击一首歌进入播放页面后，歌词就会从当地存储中读取，此时你会看到天生如许的歌词构造：

每一行歌词都将要将歌词时刻绑定在data-point上，监听歌曲播放的timeupdate事宜，当歌曲的时刻(经由取整处置惩罚)与当前data-point值相称时，就为当前歌词高亮（相当于给p增加current类名），而且依据当前高亮歌词的index索引将全部歌词盒子向上挪动p标签的高度+margin-top的高度。

lrc歌词的构造

来自网易云音乐的歌词数据：

[00:14.64]假如不是那镜子\n[00:16.73]不像你不藏隐秘\n[00:21.26]我还不愿置信\n[00:23.02]没有你我的笑更优美\n[00:28.99]那天听你在电话里略带抱歉的体贴\n
[00:16.959]摘一颗苹果\n[00:19.800]等你从门前经由\n[00:22.700]送到你的手中帮你解渴\n[00:25.570]像炎天的可乐\n
[00:00.00] 作曲 : 周杰伦\n[00:01.00] 作词 : 周杰伦\n[00:05.620]\n[00:37.980]亲吻你的手\n

能够看到花样 = [时刻点] + 要显现的笔墨 + \n
这里有两个坑须要注重：
有的歌词秒数是准确到小数点后两位，有的是三位。
有的歌词（周杰伦《算什么男子》）花样是[时刻点]+\n

时刻歌词建立映照

首先以n将歌词字符串支解成以[时刻点]笔墨的数组，但因为如许支解以后末了一个元素是空的，所以用tempArr.splice(-1, 1)删除末了一个元素。
接下来轮回遍历这个暂时数组，因为上面提到的秒数准确度的题目，所以推断一下index为9是不是为数字，若为数字则将该位数字删除。(采纳字符串截取体式格局，若你对js字符串要领不熟悉，能够猛击这里)
经由如许的处置惩罚以后，暂时数组的元素花样不再有区别了，此时再举行字符串截取，将截取到的时刻点放入timeArr，将截取的歌词放入lyricArr，并以返回保留着这两个变量的对象。

function createArrMap(lyric) {
var timeArr = [],
lyricArr = [];
var tempArr = lyric.split("\n");
tempArr.splice(-1, 1);
var tempStr = "";
$(tempArr).each(function(index) {
tempStr = this;
if (tempStr.charAt(9).match(/\d/) !== null) {
tempStr = tempStr.substring(0, 9) + tempStr.substring(10);
}
timeArr.push(tempStr.substring(0, 10));
lyricArr.push(tempStr.substring(10));
});
return {
timeArr: timeArr,
lyricArr: lyricArr
};
}

天生歌词

因为上面歌词花样形成时刻点对应的歌词为空，此时假如衬着出一个
标签的高度将为0，这会影响歌词向上挪动间隔的不一致。因而下面作出个推断假如为空，则替换为“————–”。（为空的时刻大多数是歌曲中心停留或过渡的时刻）

function renderLyric(songinfo) {
var arrMap = Util.createArrMap(songinfo.lyric);
var tpl = "";
$.each(arrMap.lyricArr, function(index, lyric) {
var lyricCOntent= lyric === "" ? "--------------" : lyric;
tpl += "

" + lyricContent + "

歌词同步

歌词同步我写在了syncLyric要领中，监听audio元素的timeupdate事宜挪用。
这个要领吸收两个参数，第一个是当前播放歌曲时刻（秒），第二个是转化为秒数的时刻点数组。
假如当前时刻>=时刻点，那末高亮当前歌词（以lrcHighIndex）存储，而且lrcHighIndex自增1。
当歌词高亮索引lrcHighIndex>=1即歌词高亮不为第一句时，盘算索引并让歌词盒子向上挪动。

function syncLyric(curS, formatTimeArr) {
if (Math.floor(curS) >= formatTimeArr[lrcHighIndex]) {
Dom.lrc.eq(lrcHighIndex).addClass('current').siblings().removeClass('current');
if (lrcHighIndex >= 1) {
lrcMoveIndex = lrcHighIndex - 2;
moveDis += Util.getMoveDis(lrcMoveIndex);
Dom.lrcwrap.animate({
"top": "-" + moveDis + "px"
}, 100);
lrcMoveIndex++;
}
lrcHighIndex++;
}
}