【前端】HTML5 Audio 预加载 按照队列顺序播放音频, 可以陆续往队列中加内容

【前端】Audio 按照队列顺序播放音频, 可以陆续往队列中加内容

var 音频库 = {}

var 当前音频集合 = []

/*** 将文本添加到队列中* 持续去播放* 播放过的音频会自动从队列中删除* * 已规划* 要保障同时进行加载的数据不能超过5个(线程池 5)* * @param 文本*/播放音频队列(文本){if(!文本){return}let that = thistry {// var audio = document.getElementById("bgMusic");//将文本的标签形式去掉let introduce = 文本.replace(/<.*?>/g,"")console.log(introduce)if(introduce){let list = []//通过, 。等进行分割introduce.split(/,|\.|;|，|。|；|\n/).forEach(str =>{if(str && str.trim().length >= 1){list.push(str.trim())}})//总数量var 数量 = list.length// that.当前音频集合 = []for (let i = 0; i < 数量; i++) {var audio = null;//缓存库如果存在的话 则直接走缓存  不用再去加载了if(that.音频库[list[i]]){audio = that.音频库[list[i]]}else{audio = new Audio();/*** 数据加载完毕  需要看是否继续加载其他数据* 这里后续扩展  并行数量限制*/audio.onloadedmetadata = function() {console.log("loadedmetadata, 加载完毕")}//这一步会加载数据audio.src='https://dds.dui.ai/runtime/v1/synthesize?voiceId=yukaimp&text='+list[i]+'&speed=1&volume=100&audioType=wav';that.音频库[list[i]] = audio}/*** 音频播放完成的事件* 判断队列中是否还有, 有的话 就继续播放*/audio.onended = function() {that.当前音频集合.shift()if(that.当前音频集合.length >= 1){that.当前音频集合[0].play()}};that.当前音频集合.push(audio);}/*** 判断当前是否有在播放音频, 没有的话 就播放第一个*/if(that.当前音频集合 && that.当前音频集合.length >= 1 && that.当前音频集合[0].paused){//没有播放 需要播放that.当前音频集合[0].play()}}}catch (e){}},

<audio> 标签支持很多的事件来让我们了解音频的加载以及播放进度。最常用的事件有：

1. loadedmetadata： 元数据加载完成。
2. canplay： 浏览器已经可以播放音频，但是预测加载的数据不足以在不暂停的情况下顺利将其播放到结束。
3. canplaythrough： 浏览器预测已经可以在不暂停的前提下将音频播放到结束。
4. stalled： 用户代理是图获取音频数据，但数据意外地没有进入。
5. suspend： 音频加载挂起。
6. play： 播放开始。
7. pause： 播放暂停。
8. waiting： 因为暂时性缺少数据，播放暂停。
9. playing： 因缺少数据而暂停或延迟的状态结束，播放准备开始。
10. seeking： 一次获取操作开始。
11. seeked： 一次获取操作结束。
12. ratechange： 播放速率变化。
13. timeupdate： HTMLAudioElement.currentTime 属性指定的时间更新。
14. volumechange： 音量变化。
15. ended： 播放到音频的结束为止，播放停止。