1. 程式人生 > 其它 >vue中audio迴圈,點選一個播放其他全部停止

vue中audio迴圈,點選一個播放其他全部停止

參考:https://www.cnblogs.com/yetianjiao/p/15798533.html

 html:

              <div class="item" v-for="(item,index) in recordList" :key="index">
                <div class="left">
                  <span class="name">{{item.recordFolderName}}</span>
                </div>
                <
div class="right right_opr"> <audio v-show="false" :ref="'audio'+index" controls :src="item.wavDownloadUrl">您的瀏覽器不支援 audio 元素。</audio> <span class="detail-record opr_btn" @click="onPlay(index)">播放</span> </div> </
div>

js:

    onPlay(index) {
      let audioDom= this.$refs['audio'+ index][0]
      audioDom.play();
      const audios = document.getElementsByTagName('audio');
      [].forEach.call(audios, function (i) {
        if(i !== audioDom) {
          i.pause();
          i.currentTime = 0;
        }
      }) 
    },