vue使用audio 音频实现播放与关闭（可用于收到消息给提示音效）

这次项目中因为对接了即时通讯 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>

原文地址：https://blog.csdn.net/m0_67460846/article/details/140496139

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！