這次項目中因為對接了即時通訊 IM，有個需求就是收到消息需要有個提示音效，所以這里就想到了用HTML5 提供的Audio 標(biāo)簽，用起來也是很方便，首先讓產(chǎn)品給你個提示音效，然后你放在項目中，使用Audio 標(biāo)簽，然后引入這段提示音效即可，后續(xù)的操作也是我下面的代碼，直接復(fù)制即可。

具體內(nèi)容參考W3C詳細(xì)文檔：http://www.w3school.com.cn/jsref/dom_obj_audio.asp

<template><audio id="notionAudio" src="@/assets/audio/notionAudio.mp3" style="display:none;"></audio><el-button @click="playNotionAudio">開啟音頻</el-button><el-button @click="pauseNotionAudio">關(guān)閉音頻</el-button>
</template>
<script>
export default {data() {return {is_open_audio: false, // 是否開啟聲音提示};},methods: {// 如果你也想在收到消息的時候播放提示音效，在收到消息回調(diào)的方法里面執(zhí)行這個方法（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>