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