vue3使用音频audio标签
https://i-blog.csdnimg.cn/direct/07544cb3b327413485df9f4cf7ed5f0d.jpeg#pic_center一、配景
项目使用vue3，需求针对告警进行语音提示，点击“播放音频”按钮进行语音提示：
https://i-blog.csdnimg.cn/direct/af9ed7df5b1948518ce81b910aca0765.png
二、页面
https://i-blog.csdnimg.cn/direct/38970b255f5e4e2da648b5411d47dee5.png
三、标签介绍
\<audio> 标签中的 preload 属性用于控制浏览器在页面加载时如那边理音频文件的预加载。preload 属性可以接受以下几个值：
[*] auto：浏览器会在页面加载时尽可能地预加载音频文件。这意味着音频文件会被下载到浏览器的缓存中，以便用户可以尽快播放。通常这是最常用的设置。
[*] metadata：浏览器只会预加载音频文件的元数据（如时长、音频轨道等），而不会下载整个文件。这对于淘汰初始加载时间是有资助的，尤其是在文件较大时。
[*] none：浏览器不会预加载音频文件。这意味着音频文件不会被下载，直到用户点击播放按钮。这样可以节省带宽，但用户可能会在第一次播放时遇到耽误。
使用 preload="auto" 的优点是可以大概提高用户体验，因为音频文件会更快地准备好播放，尤其是在用户可能会立即播放音频的情况下。不外，使用时也要思量到用户的带宽和流量限定。
四、代码
音频文件配置
https://i-blog.csdnimg.cn/direct/efc86c9cdba2468296f488e40ae53212.png
xx.vue
<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>标签
<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：针对播放告警内容，比如中文或者英文词条情况
// 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 对象中指定的文本。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]