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 @   勤勤恳恳小码农  阅读(763)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示