Javascript 在队列中预加载mp3文件，以避免在播放队列中的下一个文件时出现任何延迟

我正在编写一个脚本，其中我正在播放多个mp3，每个文件都在队列中。播放下一个.mp3文件时有轻微延迟，因为缓冲/加载文件需要时间

如何缓冲队列中的下一个.mp3文件，以便所有文件顺利运行而不延迟

getData（1）；
函数getData（id）{
//埃姆蒂分区
$（“#surah wrapper”）.empty（）；
$.ajaxSetup({
是的，
jsonpCallback:“quranData”
})；//定义ajax设置
//古兰经文本类型古兰经乌斯马尼|古兰经简单|古兰经简单干净|古兰经逐字逐句
$.getJSON（“http://api.globalquran.com/surah/“+id+”/quran-uthmani？key=api\u key&jsoncallback=？”{
格式：“jsonp”
}，函数（数据）{
如果（id>1）{
$（“”）html（“㶖ِِِِِِِّّّّْْْنِلِِِِِِِِِِِِِِِِّّّّّّ1616；
}
$.each（data.quran，function（i，by）{
$。每个（按，函数（verseNo，行）{
//$（“”）html（“（“+line.surah+”：“+line.ayah+”）”+line.verse）；
$（“”）.html（line.verse+”（“+line.surah+”：“+line.ayah+”））.appendTo（“#surah wrapper”）；
});
});
});
}
//播放脚本&突出显示脚本
var听力指数=0；
var countSpan=0；
countSpan=$（'#surah wrapper'）.children（）.length；
var surahNo=1；
变量strCat="http://download.quranicaudio.com/verses/Sudais/mp3/001001.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001002.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001003.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001004.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001005.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001006.mp3,http://download.quranicaudio.com/verses/Sudais/mp3/001007.mp3";
setPlayer（）；
$（'.customSurah'）.change（函数（）{
$（'.play btn'）.css（'display'，'none'）；
$aud.pause（）；
surahNo=$（“#surah选项：选定”）.val（）；
setTimeout（函数（）{
countSpan=$（'#surah wrapper'）.children（）.length；
var i=0；
strCat=''；
对于（i=0；i最大高度）{
$（'html，body'）。设置动画({
scrollTop:CurentSpan位置-50
}, 1000);
}
};
});
}

。播放btn{
背景图像：url（“https://cdn0.iconfinder.com/data/icons/cosmo-player/40/button_play_1-64.png");
浮动：无；
字体大小：0！重要；
高度：50px；
利润率：15px自动；
填充物：5px10px；
文本对齐：居中；
宽度：50px；
}
正文{float:right；direction:rtl；}
span{填充：5px10px；方向：rtl；文本对齐：右；
保证金：5px 1px；
字体大小：20px}
.qplaying{
背景：#f00无重复滚动0；
}

法提哈尔·巴卡拉·伊姆拉南·尼萨瓦尔·马伊达尔·安法拉特·塔巴尤努舒迪乌斯法尔·拉迪布拉希马尔·希杰兰·纳拉尔·伊斯拉尔·卡夫马兰塔·哈拉尔·安比亚尔·哈加尔·穆米诺·努拉尔·富卡纳什·舒阿拉多安·纳姆·纳姆·卡萨萨尔·安卡博托·哈马纳斯·阿扎巴蒂亚尔·萨雷斯·萨哈加尔·阿扎扎扎巴蒂亚尔·扎扎法尔·扎扎法尔·扎扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·扎法尔·anAl-jaathiyal-AhqafMuhammadAl-FathAl-hujuraaatqaafadh-dhariyatat-TurAn-NajmAl-qamaar-rahmanal-WaaqiaAl-hadial-MumtahanaAs-SaffAl-Jumu'aAl-MunaafiqoonAt-tahaabunat-TahrimAl-MulkAl-QalamAl-haajinal-JinnAl-MuzzammilAl-datthiral-qiyamaal-InsaanAl-muratan-takatan-takaat-takaa-takaa-infiqata-infa-wilal阿拉尔-穆塔菲拉尔-InshiqaaqAl-BuroojAt-TaariqAl-A'laaAl-Ghashiyal-FajrAl-BaladAsh-ShamsAl-LailAd-DhuhaaAsh-SharhAt-TinAl-AlaqAl-QadrAl-BayyinaAz-ZalzalaAl-Aadiyatal-Qari'aAt-Takaathumazal-Filqurashal-Maa'unAl-KawtharAl-KaafiroonAn-NasrAl-MasadAl-Ikhlasal-Falasan-Naas

您可以使用

Promise.all（）

，

Array.prototype.map（）

，

Audio（）

构造函数，

canplaythrough

事件先加载所有音频；然后使用

Array.prototype.reduce（）

，

Promise

构造函数在

事件结束时按顺序播放音频


var音频地址=[
"http://download.quranicaudio.com/verses/Sudais/mp3/003001.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003002.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003003.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003004.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003005.mp3",
"http://download.quranicaudio.com/verses/Sudais/mp3/003006.mp3"
];
$（“按钮”）。单击（函数（）{
Promise.all（audioAddress.map）（函数（url）{
返回新承诺（函数（解析）{
var audio=新音频（url）；
audio.oncanplay=函数（）{
解析（音频）；
}
})
}))
.then（功能（数据）{
数据减少（函数（承诺、a、索引）{
return promise.then（函数（）{
返回新承诺（函数（解析）{
a、 统一=决心；
a、 play（）；
$（“p>span”）.removeClass（“播放”）；
$（“p>span:n个子项（“+（索引+1）+”））
.addClass（“播放”）；
})
})
}，Promise.resolve（））
})
})；
#我的音频{
显示：无；
}
跨度{
利润率：0px 10px；
}
.玩{
背景：黄色；
}

播放音频

第1节
第2节
第3节
第4节
第5节
第6节
开始吧。我面临的最大挑战是。将您的
元素设置为
preload=“none”
。我的脚本会在您播放下一首歌曲之前立即加载，并在第一首歌曲完成后自动播放下一首歌曲

如果你担心全球范围，就把它放在生活中。享受吧


var files=document.getElementsByTagName（'audio'）；
var-songs=[]；
var指数=0；
变量宋=函数（元素）{
这个指数=指数；
this.playing=函数（事件）{
试一试{
文件[this.index].preload=“auto”；
}
捕获（e）{
}
};
this.end=函数（事件）{
试一试{
文件[this.index].play（）；
}
捕获（e）{
}