要实现当有其他音频播放时暂停当前音频，你可以使用全局事件总线或 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 方法 ：暂停当前音频。
- 事件监听 ：在组件销毁前移除事件监听，以防止内存泄漏。
