vue3使用音频audio标签

文章目录

一、背景

项目使用vue3,需求针对告警进行语音提示,点击"播放音频"按钮进行语音提示:

二、页面

三、标签介绍

\<audio> 标签中的 preload 属性用于控制浏览器在页面加载时如何处理音频文件的预加载。preload 属性可以接受以下几个值:

  • auto:浏览器会在页面加载时尽可能地预加载音频文件。这意味着音频文件会被下载到浏览器的缓存中,以便用户可以尽快播放。通常这是最常用的设置。

  • metadata:浏览器只会预加载音频文件的元数据(如时长、音频轨道等),而不会下载整个文件。这对于减少初始加载时间是有帮助的,尤其是在文件较大时。

  • none:浏览器不会预加载音频文件。这意味着音频文件不会被下载,直到用户点击播放按钮。这样可以节省带宽,但用户可能会在第一次播放时遇到延迟。

使用 preload="auto" 的好处是能够提高用户体验,因为音频文件会更快地准备好播放,尤其是在用户可能会立即播放音频的情况下。不过,使用时也要考虑到用户的带宽和流量限制。

四、代码

音频文件配置

xx.vue

java 复制代码
<div class="param">
  <a-button @click="playAlarmContent">播放音频</a-button>
  <audio ref="audioRef" :src="audioSrc" preload="auto"></audio>
</div>

const audioSrc = ref(new URL('@/assets/audio/emergency.mp3', import.meta.url).href);
const audioRef = ref(null);

const addParam = ref({
  "alarmChoice": "2",
});

//智能语音播放 0--智能语音播放  1----声音文件告警   2---静音
const playAlarmContent = (context) => {
  if (addParam.value.alarmChoice == 2) {
    audioRef.value.pause()
    return
  } else if (addParam.value.alarmChoice == 1) {
    audioRef.value.play()
  }  else if (addParam.value.alarmChoice == 0) {
    // context = t('Alaram_temperatureAlarm_low')
    const utterance = new SpeechSynthesisUtterance(context);
    window.speechSynthesis.speak(utterance);
  }
};

五、代码说明

场景1:针对加载固定格式的比如MP3文件,可直接使用<audio>标签

java 复制代码
<audio ref="audioRef" :src="audioSrc" preload="auto"></audio>

const audioSrc = ref(new URL('@/assets/audio/emergency.mp3', import.meta.url).href);
const audioRef = ref(null);

audioRef.value.play()	//播放
audioRef.value.pause()	//暂停

注意点:

  • audioSrc :用于指向mp3文件位置
  • audioRef :和ref名称相同即可关联上
  • auto:浏览器会在页面加载时尽可能地预加载音频文件。这意味着音频文件会被下载到浏览器的缓存中,以便用户可以尽快播放。通常这是最常用的设置。

场景2:针对播放告警内容,比如中文或者英文词条情况

java 复制代码
// context = t('Alaram_temperatureAlarm_low')
    const utterance = new SpeechSynthesisUtterance(context);
    window.speechSynthesis.speak(utterance);

注意点:

  • context:就是完整的内容,而我例子t('Alaram_temperatureAlarm_low')是解析词条然后返回对应语言的内容。
  • 使用了 Web Speech API 中的 SpeechSynthesisUtterance 和 speechSynthesis 对象来实现文本到语音的功能。
  • SpeechSynthesisUtterance: 这是一个构造函数,用于创建一个语音合成的实例。你可以将要朗读的文本作为参数传递给它。
  • window.speechSynthesis.speak(utterance): 这个方法用于开始朗读 utterance 对象中指定的文本。
相关推荐
love530love3 小时前
【保姆级教程】阿里 Wan2.1-T2V-14B 模型本地部署全流程:从环境配置到视频生成(附避坑指南)
人工智能·windows·python·开源·大模型·github·音视频
Antonio9154 小时前
【音视频】WebRTC ICE 模块深度剖析
音视频·webrtc
山河君4 小时前
webrtc之语音活动上——VAD能量检测原理以及源码详解
算法·音视频·webrtc·信号处理
音画拾光6 小时前
4 款音分轨工具推荐:制片帮领衔,轻松搞定音频分离
音视频
软工的小白6 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
LeonIter10 小时前
视频判重需求:别为同一内容花两次钱!
音视频·特征提取·重复判定
二川bro12 小时前
第24节:3D音频与空间音效实现
3d·音视频
算家云12 小时前
腾讯最新开源HunyuanVideo-Foley本地部署教程:端到端TV2A框架,REPA策略+MMDiT架构,重新定义视频音效新SOTA!
人工智能·音视频·算家云·hunyuanvideo·模型部署教程·镜像社区
我是海飞17 小时前
Tensorflow Lite 的yes/no语音识别音频预处理模型训练教程
python·学习·tensorflow·音视频·嵌入式·语音识别
音视频牛哥17 小时前
具身智能的工程落地:视频-控制闭环的实践路径
人工智能·音视频·人工智能+·具身智能rtsp方案·具身智能rtmp方案·智能机器人rtsp方案·智能机器人rtmp低延迟