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

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

var 音频库 = {}

var 当前音频集合 = []

/** * 将文本添加到队列中 * 持续去播放 * 播放过的音频会自动从队列中删除 * * 已规划 * 要保障同时进行加载的数据不能超过5个(线程池 5) * * @param 文本 */ 播放音频队列(文本){ if(!文本){ return } let that = this try { // 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=' 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> 标签支持很多的事件来让我们了解音频的加载以及播放进度。最常用的事件有：

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