其他分享
首页 > 其他分享> > 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;
        }
      }) 
    },

 

   

标签:index,vue,播放,audios,点击,html,audioDom,audio
来源: https://www.cnblogs.com/xxluo/p/16170039.html