• vue 多个audio播放 一个audio播放其他audio禁止播放


    页面:
            
    <div class="right">
          <audio  :ref="'audio' + index"  :src="item.audioUrl"  @ended="haveEnded"/>
          <div :class="{ active: playIndex == index}"   class="audio-component"   @click="toReadAudio(index)" />
    </div>
     js代码
    toReadAudio (index) {
                let length = this.weekDetail.wordsRepeats.length || 0  // this.weekDetail.wordsRepeats是总共有几条音频数据
                if (length) {
                    for (let i = 0; i < length; i++) {
                        let audioOne = 'audio' + i
                        audioOne = this.$refs[audioOne][0]
                        if (i === index) {
                            if (audioOne.paused) {
                            // 切换播放中的css样式
                                this.playIndex = index
                                audioOne.load()//音频重新加载,重新播放
                                audioOne.play()
                            } else {
                                audioOne.pause()
                                this.playIndex = null
                            }
                        } else {
                            audioOne.pause()
                        }
                    }
                }
            }
  • 相关阅读:
    position之属性
    Grid网格布局
    position 属性指定了元素的定位类型
    注册表单
    简单页面
    自我介绍
    正则表达式
    Dom和Bom
    颜色和单位
    伪类和伪元素的区别
  • 原文地址:https://www.cnblogs.com/lh1998/p/13724278.html
Copyright © 2020-2023  润新知