vue实现多个音频自动播放，依次循环

一、Chrome 66之后禁止网页声音自动播放问题解决--单个网站配置

1.【设置】->【搜索声音】->【点击网站设置】

 

2.点击【更多内容设置】->【声音：允许网站播放声音】，添加网站

二、audio自动播放功能实现

1、html部分用div包裹循环audio通过ref获取audio 

<div v-for="(item,index) in musiclist" :key="index">
  <audio
    :src="item"
     ref="audios"
     ></audio>
</div>

2、js部分

由于for循环中会先循环完外层代码后再执行settimeout中的语句，settimeout就会执行数组的最后一项，音乐播放的地址也一直会是最后一个audio的。采用二维数组的方式把数组的最后一项换成audio所有播放的地址。

getWarnMusic().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.count = res.data.count
          if (this.count > 0) {
            // 数据处理 存放audio的播放路径
            this.musiclist = res.data.music
            // 循环的数组 二位数组的结构，最后一项为音乐播放的所有路径
            this.musicPaths = res.data.music.slice(0, -1)
            this.musicPaths.push(this.musiclist)
            
            for (let i = 0; i < this.musicPaths.length; i++) {
              var that = this
               //settimeout采用闭包的形式，这样会依次执行，延迟时间设置为音乐的时长
              setTimeout(
                (function(i) {
                  return function timer() {
                    //多个audio循环ref取值用以下方法
                    that.$refs.audios[i].play()
                  }
                }(i)), i * 1500)
            }
          }
        }
      })

for循环的数据结构

audio的播放路劲结构 （就是上面的数组最后一项）