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

【前端】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='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： 播放到音频的结束为止，播放停止。