如何优雅地播放页面的一堆歌曲？
最近，做了一个内部团队使用的网盘程序，里面会涉及到MP3音乐在线播放的功能。
面对很多好听的歌曲，却不能连续播放，只能点哪个播放哪个，小苗苗们感到不爽，三番五次催促我做个连播的程序。
对于前端，俺就像一个在菜市场逛了很多年还是不知道怎么买菜的一样，属于门外汉。
找了个前端大神，张口就要俺500大洋，算了，精心过日子，咱还是边摸索边自力更生吧！
一大早，俺向万能的朋友圈求助，终于有了思路。
好了，开工吧！
var filesrc=obj.attr("filesrc");
var filename=obj.find(".fname").text();
filearr=filename.split(".");
fileext=filearr[filearr.length-1];
fileext=fileext.toLowerCase();
//音频播放
if($.inArray(fileext, ['mp3','wav','ogg'])!=-1){
inf('上一首 下一首 下载音频'+filename+'');
$(".downBtn").click(function(){
window.open(filesrc,"_blank");
});
//2018-6-13补丁，连续播放的程序
var mscArr = [];//多个音乐的播放地址
var fileArr=[];//文件ids
var ix=0;//游标下限
var iy=$(".file").length;//游标上限
var iNow=0;//当前游标
$(".file").each(function(){
var _this=$(this);
var filepath=_this.attr("filesrc");
var _fid=_this.attr("fid");
filepaths=filepath.split(".");
filepathext=filepaths[filepaths.length-1];
filepathsrc=filepathext.toLowerCase();
if($.inArray(filepathext, ['mp3','wav','ogg'])!=-1){
//如果是当前选中文件，则赋值iNow
if(filesrc==filepath){
iNow=ix;
}
mscArr.push(filepath);
fileArr.push(_fid);
ix++;
}
});
//每次读数组最后一个元素
clrBg();
$("#file"+fileArr[iNow]).css("background","#eee");
document.getElementById("audioBox").addEventListener('ended', playEndedHandler, false);
//上一首
$(".prevBtn").click(function(){
iNow--;
clrBg();
$("#file"+fileArr[iNow]).css("background","#eee");
$(".playName").html($("#file"+fileArr[iNow]).find(".fname").text());
document.getElementById("audioBox").src = mscArr[iNow];
document.getElementById("audioBox").play();
document.getElementById("audioBox").addEventListener('ended', playEndedHandler, false);
if(iNow==0){
$(".prevBtn").attr("disabled",true);
}
else{
$(".prevBtn").removeAttr("disabled");
$(".nextBtn").removeAttr("disabled");
}
});
//下一首
$(".nextBtn").click(function(){
iNow++;
clrBg();
$("#file"+fileArr[iNow]).css("background","#eee");
$(".playName").html($("#file"+fileArr[iNow]).find(".fname").text());
document.getElementById("audioBox").src = mscArr[iNow];
document.getElementById("audioBox").play();
document.getElementById("audioBox").addEventListener('ended', playEndedHandler, false);
if(iNow==iy-1){
$(".nextBtn").attr("disabled",true);
}
else{
$(".prevBtn").removeAttr("disabled");
$(".nextBtn").removeAttr("disabled");
}
});
//清理background
function clrBg(){
$(".file").each(function(){
$(this).css("background","#fff");
});
}
//监听end 持续播放
function playEndedHandler(){
clrBg();
$("#file"+fileArr[iNow]).css("background","#eee");
$(".playName").html($("#file"+fileArr[iNow]).find(".fname").text());
document.getElementById("audioBox").src = mscArr[iNow];
document.getElementById("audioBox").play();
console.log(mscArr.length);
if(iNow==iy-1){
iNow=0;
}else{
iNow++;
}
!mscArr.length &&
document.getElementById("audioBox").removeEventListener('ended',playEndedHandler,false);
//只有一个元素时解除绑定
}
}
手机端访问效果：
ps：丑是丑了点儿，可实用啊！~O(∩_∩)O哈哈~
预览效果页面，请关注并回复本公众号“音乐播放”查看
有需要的可以mark一下~~
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180613G1ANKP00?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
