vue3使用音频audio标签

发布时间：2025-06-24 08:02:58  作者：北方职教升学中心  阅读量：159

文章目录。

• 一、背景。
• 二、页面。
• 三、标签介绍。
• 四、代码。
• 五、代码说明。
• • 场景1：MP3文件࿰等加载固定格式c;可直接使用\<audio>标签。
  • 场景2：播放报警内容，例如，中文或英文条目。

一、背景。

vue3࿰项目使用c;语音提示󿼌点击“播放音频”按钮进行语音提示：

二、页面。

三、标签介绍。

\<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。(。{。// context = t('Alaram_temperatureAlarm_low')。const。utterance。 =new。SpeechSynthesisUtterance。(。context。)。;window。.。speechSynthesis。.。speak。(。utterance。)。;}。}。;

五、代码说明。

场景1：MP3文件࿰等加载固定格式c;可直接使用<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 对象中指定的文本。