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>
相关推荐
运维-大白同学几秒前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing31 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
简鹿办公2 小时前
如何提取某站 MV 视频中的音乐为 MP3 音频
音视频·简鹿视频格式转换器·视频提取mp3音频
yufengxinpian2 小时前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript