紹興專業(yè)做網(wǎng)站的公司蘇州seo按天扣費
這次項目中因為對接了即時通訊 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>