ps:本周笔者在实验室每周小项目(视频播放器、音乐播放器、天气查询、在线打字游戏、考勤系统)中选择了“音乐播放器”,原本是打算做个pc端网页版的,但考虑到此类播放器基本无人问津,于是在某同学的刺激下,做了个移动端的web音乐播放器。所有图片来自网络,所有图标来自阿里图标,如有侵权,请私信笔者。
本音乐播放器实现的功能(尚未完善):播放、暂停、停止、上(下)一首、静音(手机能调节音量,就没考虑音量大小的调节)、进度条拖拽……
界面部分:歌手图片的旋转动画、歌词同步显示、进度条的更新
在此谈谈如何实现进度条的更新及歌词同步显示
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];