关于如何制作移动网页音乐播放器部分心得

    ps:本周笔者在实验室每周小项目(视频播放器、音乐播放器、天气查询、在线打字游戏、考勤系统)中选择了“音乐播放器”，原本是打算做个pc端网页版的，但考虑到此类播放器基本无人问津，于是在某同学的刺激下，做了个移动端的web音乐播放器。所有图片来自网络，所有图标来自阿里图标，如有侵权，请私信笔者。

    本音乐播放器实现的功能(尚未完善)：播放、暂停、停止、上(下)一首、静音(手机能调节音量，就没考虑音量大小的调节)、进度条拖拽……

    界面部分：歌手图片的旋转动画、歌词同步显示、进度条的更新

    在此谈谈如何实现进度条的更新及歌词同步显示

1.进度条的更新

1. 监听audio标签的时间更新事件：

$("#mymusic").get(0).addEventListener("timeupdate",function(){}    

    2.计算当前播放的时间比例(播放时间 / 总时间)： //currentTime：返回当前音频播放时间；duration：返回当前音频长度

var scale = this.currentTime / this.duration;

    3.获取css中设置的进度条部分的长度：  //jdt为进度条所在div-class名，but为进度条按钮class名

var allwidth = $(".jdt").width() - $(".but").width();

    4.计算当前播放长度(时间比例 * 总时间)：

var leng = allwidth * scale;

    5.CSS模拟进度条更新：

$(".but").css("transform","translate("+leng+"px,-0.15rem)");     //translate移动实现按钮的移动
$(".background").css('width',leng+"px");  

2.歌词同步显示

    1.声明变量及用于存放时间和歌词的数组及显示区域区域：

var a =request.responseText;
var ltime= new Array();
var lgc=new Array();var showgc=document.getElementById("show");

    2.去除lrc歌词文件每行开头的"["：

var str= a.split("[");

    3.循环遍历时间与文字：

for(var n=1;n<str.length;n++){
	var time = str[n].split("]")[0];     //取出时间 （分钟:秒.毫秒  格式）
	var gc = str[n].split("]")[1];        //取出歌词
	var m = time.split(":")[0];        //取出分钟
	var s = time.split(":")[1];        //取出秒
	var at = parseInt(m)*60+parseInt(s);        //计算总时间
	ltime[n-1]=at;        //返回时间
	lgc[n-1]=gc;        //返回歌词
}

    4.监听时间更新事件显示歌词：

showgc.innerHTML=lgc[n];