当前位置：首页 > article >正文

vue3使用音频audio标签

article 2025/1/22 1:42:26

在这里插入图片描述

文章目录

一、背景
二、页面
三、标签介绍
四、代码
五、代码说明
- 场景1：针对加载固定格式的比如MP3文件，可直接使用\<audio>标签
- 场景2：针对播放告警内容，比如中文或者英文词条情况

一、背景

项目使用vue3，需求针对告警进行语音提示，点击“播放音频”按钮进行语音提示：
在这里插入图片描述

二、页面

在这里插入图片描述

三、标签介绍

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

auto：浏览器会在页面加载时尽可能地预加载音频文件。这意味着音频文件会被下载到浏览器的缓存中，以便用户可以尽快播放。通常这是最常用的设置。
metadata：浏览器只会预加载音频文件的元数据（如时长、音频轨道等），而不会下载整个文件。这对于减少初始加载时间是有帮助的，尤其是在文件较大时。
none：浏览器不会预加载音频文件。这意味着音频文件不会被下载，直到用户点击播放按钮。这样可以节省带宽，但用户可能会在第一次播放时遇到延迟。

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

四、代码

音频文件配置

在这里插入图片描述

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);