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

最新推荐文章于 2024-02-24 15:34:39 发布

银子的笔记

最新推荐文章于 2024-02-24 15:34:39 发布

阅读量419

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/c_jiji_yy/article/details/113996044

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

添加链接描述

二：
       <audio
                  controls
                  :src="item.src"
                  class="mt10 audio4"
                  :data-id="`audio3${item.id}`"
                  @play="handlePlay(`audio3${item.id}`)"
                ></audio>

    handlePlay(id) {
      this.videoElement = document.getElementsByTagName('audio')
      // console.log('aaaa', id, this.videoElement)
      Array.from(this.videoElement).forEach(item => {
        // console.log('bbbb', item.dataset.id)
        if (item.dataset.id == id) {
          item.play()
        } else {
          item.pause()
        }
      })
    },

三：
data() {
  return {
    // 创建一个对象数组来存储所有的数据
    items: [
      {
        type: 'audio',
        // 添加一个audio属性来存储对应的音频对象
        audio: new Audio('http://xxx1.mp3')
      },
      {
        type: 'text',
        content: '这是一段文本'
      },
      {
        type: 'audio',
        audio: new Audio('http://xxx2.mp3')
      },
      {
        type: 'image',
        src: 'http://xxx.jpg'
      },
      {
        type: 'audio',
        audio: new Audio('http://xxx3.mp3')
      }
    ],
    // 当前播放的音频对象
    currentAudio: null
  }
},
methods: {
  // 播放或暂停指定的音频
  playOrPause(audio) {
    // 检查是否有其他音频正在播放
    if (this.currentAudio && this.currentAudio !== audio && !this.currentAudio.paused) {
      this.currentAudio.pause();
    }
    // 设置当前播放的音频对象并切换状态
    this.currentAudio = audio;
    if (this.currentAudio.paused) {
      this.currentAudio.play();
    } else {
      this.currentAudio.pause();
    }
  },
  // 音频播放结束事件
  audioEnd(audio) {
    this.currentAudio = null;
  }
}
然后在模板中使用v-if和v-else-if来根据type属性渲染不同的组件：

<div v-for="item in items" :key="item.type">
  <audio-component v-if="item.type === 'audio'" :audio="item.audio" @playOrPause="playOrPause" @audioEnd="audioEnd"></audio-component>
  <p v-else-if="item.type === 'text'">{{ item.content }}</p>
  <img v-else-if="item.type === 'image'" :src="item.src">
</div>