vue使用audio 音频实现播放与关闭（可用于收到消息给提示音效）
<template>
<audio id="notionAudio" src="@/assets/audio/notionAudio.mp3" style="display:none;"></audio>
<el-button @click="playNotionAudio">开启音频</el-button>
<el-button @click="pauseNotionAudio">关闭音频</el-button>
</template>
<script>
export default {
data() {
return {
is_open_audio: false, // 是否开启声音提示
};
},
methods: {
// 如果你也想在收到消息的时候播放提示音效，在收到消息回调的方法里面执行这个方法（playNotionAudio）即可。
playNotionAudio() {
const audio = document.getElementById('notionAudio');
if (audio) {
audio.play().then(() => {
console.log('播放成功');
this.is_open_audio = true;
}).catch(function(error) {
console.log("播放失败，用户需要进行交互以播放音频: ", error);
});
}
},
pauseNotionAudio() {
// pause()方法只是暂停，这里还需要重新load，然后需要再次play，音乐就可重头播放。
const audio = document.getElementById('notionAudio');
if (audio) {
audio.pause();
audio.load();
this.is_open_audio = false;
}
},
},
}
</script>