监听其他音频播放时暂停正在播放的音频

要实现当有其他音频播放时暂停当前音频，你可以使用全局事件总线或 Vuex 来管理音频播放状态。这里我将展示如何使用一个简单的事件总线来实现这个功能。

首先，你需要创建一个事件总线。你可以在项目的一个公共文件中创建它，例如 eventBus.js ：

import Vue from 'vue';
export const EventBus = new Vue();

然后，在你的组件中使用这个事件总线来监听和触发音频播放事件：

<script>
import { EventBus } from '../../../../eventBus' // 引入事件总线

export default {
  name: 'TrialListening',
  mixins: [rendererMixin],
  data() {
    return {
      playStateIcon: ['play-icon', 'pause-icon', 'loading-icon'],
      playState: 0,
      audioInstance: null,    }
  },
  methods: {
    /**
     * 播放音频
     * @param {String} url - 音频的URL
     */
    playAudio(url) {
      this.playState = 2; // 设置为加载中状态
      const audio = new Audio(url);

      // 触发全局事件，通知其他音频暂停
      EventBus.$emit('pauseAllAudio');

      audio.play().then(() => {
        this.playState = 1; // 设置为播放状态
      }).catch(error => {
        console.error('音频播放失败:', error);
        this.playState = 0; // 恢复为初始状态
      });

      // 监听音频播放结束事件
      audio.addEventListener('ended', () => {
        this.playState = 0; // 恢复为初始状态
      });

      this.audioInstance = audio;
      // 监听全局暂停事件
      EventBus.$on('pauseAllAudio', this.pauseAudio);
    },

    /**
     * 暂停音频
     */
    pauseAudio() {
      if (this.audioInstance) {
        this.audioInstance.pause();
        this.playState = 0; // 设置为暂停状态
      }
    }
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    EventBus.$off('pauseAllAudio', this.pauseAudio);
  }
}
</script>

说明

• 事件总线 ：使用 EventBus 来在组件之间传递事件。
• playAudio 方法 ：在播放音频时触发 pauseAllAudio 事件，通知其他组件暂停音频。
• pauseAudio 方法 ：暂停当前音频。
• 事件监听 ：在组件销毁前移除事件监听，以防止内存泄漏。