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

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

扫码关注云+社区

领取腾讯云代金券