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;
        }
      }) 
    },

 

 
 
posted @ 2022-04-20 15:25  勤勤恳恳小码农  阅读(804)  评论(0)    收藏  举报