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

这次项目中因为对接了即时通讯 IM,有个需求就是收到消息需要有个提示音效,所以这里就想到了用HTML5 提供的Audio 标签,用起来也是很方便,首先让产品给你个提示音效,然后你放在项目中,使用Audio 标签,然后引入这段提示音效即可,后续的操作也是我下面的代码,直接复制即可。

具体内容参考W3C详细文档:http://www.w3school.com.cn/jsref/dom_obj_audio.asp

html 复制代码
<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>
相关推荐
小墨宝28 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED43 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子1 小时前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
xiaoh_71 小时前
解决视频处理中的 HEVC 解码错误:Could not find ref with POC xxx【已解决】
python·ffmpeg·音视频
YuShiYue2 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js