如何优雅地播放页面的一堆歌曲？

最近，做了一个内部团队使用的网盘程序，里面会涉及到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一下~~