这次项目中因为对接了即时通讯 IM,有个需求就是收到消息需要有个提示音效,所以这里就想到了用HTML5 提供的Audio 标签,用起来也是很方便,首先让产品给你个提示音效,然后你放在项目中,使用Audio 标签,然后引入这段提示音效即可,后续的操作也是我下面的代码,直接复制即可。
具体内容参考W3C详细文档: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">关闭音频</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>