本文系统讲解 HTML ＜audio＞ 元素的核心属性、事件与方法，并提供多种格式兼容策略。通过构建功能完整的自定义播放器（含进度条、播放速度调节、缓冲显示），结合 Web Audio API 实现实时音频可视化，同时探讨移动端自动播放限制、媒体会话定制及可访问性实践。无论你是刚接触音频嵌入的初学者，还是希望优化音频体验的进阶开发者，都能从中获得实用知识与代码示例。

一、 快速开始：基本用法与属性

最基本的 ＜audio＞ 元素只需一个 src 属性和 controls 属性即可显示浏览器原生控制栏：

＜audio src="audio.mp3" controls＞  您的浏览器不支持 audio 元素。＜/audio＞

为了兼容不同浏览器编码格式，推荐使用 ＜source＞ 子元素提供多个备选资源：

＜audio controls＞  ＜source src="audio.mp3" type="audio/mpeg"＞  ＜source src="audio.ogg" type="audio/ogg"＞  ＜source src="audio.wav" type="audio/wav"＞  您的浏览器不支持 audio 元素。＜/audio＞

提示：将兼容性最广的格式（通常是 MP3）放在最前面，可以避免不必要的网络请求。

核心属性一览

注意：现代浏览器（Chrome、Safari、Firefox）大幅限制了 autoplay 功能。通常只有 muted 或用户已与页面交互（点击、触摸等）时，自动播放才有效。下文“自动播放策略”一节将详细说明。

二、支持的音频格式与编码

为确保跨浏览器兼容，建议同时提供 MP3 和 OGG 或 AAC 格式：

使用＜source＞ 时，浏览器会从第一个 type 支持的格式开始加载，因此应把兼容性最广的格式（如 MP3）放在前面。

三、JavaScript API 全面解析

＜audio＞ 元素（继承自 HTMLMediaElement）提供了丰富的属性和方法：

常用方法

const audio = document.querySelector('audio');
// 播放与暂停audio.play();   // 返回 Promiseaudio.pause();

// 重载音频（切换 src 后调用）audio.load();

// 音量（0.0 ~ 1.0）audio.volume = 0.6;

// 跳转时间（秒）audio.currentTime = 45;

// 播放速率（0.5 半速，2.0 倍速）audio.playbackRate = 1.25;

重要属性

关键事件

audio.addEventListener('error', (e) =＞ {  switch (audio.error.code) {    case MediaError.MEDIA_ERR_ABORTED: console.log('用户中止加载'); break;    case MediaError.MEDIA_ERR_NETWORK: console.log('网络错误'); break;    case MediaError.MEDIA_ERR_DECODE: console.log('解码错误'); break;    case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED: console.log('格式不支持'); break;  }});

四、应对自动播放策略

现代浏览器（Chrome、Safari、Firefox）对 autoplay 施加了严格限制。规则可总结为：

• 允许自动播放：音频静音（muted）时，无论用户是否交互都可以自动播放。

• 需要用户手势：如果音频未静音，则必须在用户点击、触摸或按键之后才能调用 play()。

• 检测失败并提供备选：audio.play() 返回一个 Promise，如果因策略被拒绝，会抛出 NotAllowedError。。

最佳实践

// 尝试播放，捕获可能的错误audio.play().catch(error =＞ {  if (error.name === 'NotAllowedError') {    console.log('需要用户交互才能播放');    // 显示一个“点击以播放”的提示按钮    showPlayOverlay();  }});

// 如果页面需要背景音乐，可以默认静音，然后提供“解除静音”按钮audio.muted = true;audio.play(); // 这时一定成功（静音）// 然后监听用户点击“解除静音”按钮unmuteBtn.addEventListener('click', () =＞ {  audio.muted = false;});

五、集成媒体会话（Media Session API）

当用户在移动设备锁屏或使用系统媒体控制中心（如耳机线控、键盘媒体键）时，我们可以通过 Media Session API 显示当前播放的歌曲信息，并响应控制命令。

if ('mediaSession' in navigator) {  navigator.mediaSession.metadata = new MediaMetadata({    title: '夏日微风',    artist: '放松音乐家',    album: '自然之声',    artwork: [      { src: 'cover-small.jpg', sizes: '96x96', type: 'image/jpeg' },      { src: 'cover-large.jpg', sizes: '512x512' }    ]  });  navigator.mediaSession.setActionHandler('play', () =＞ audio.play());  navigator.mediaSession.setActionHandler('pause', () =＞ audio.pause());  navigator.mediaSession.setActionHandler('previoustrack', () =＞ loadPreviousSong());  navigator.mediaSession.setActionHandler('nexttrack', () =＞ loadNextSong());  // 可选：seekto、seekbackward、seekforward 等}

记得在播放状态改变时更新媒体会话的播放状态：navigator.mediaSession.playbackState = 'playing' 或 'paused'。

六、 跨域资源（CORS）问题

如果你的音频文件存储在另一个域名下，并且你想通过 JavaScript 读取音频数据（例如 buffered 属性、Web Audio API 分析），那么服务器必须支持 CORS，并且你需要为 ＜audio＞ 元素设置 crossorigin 属性：

＜audio crossorigin="anonymous"＞  ＜source src="https://cdn.example.com/audio.mp3" type="audio/mpeg"＞＜/audio＞

同时，服务器响应头应包含：Access-Control-Allow-Origin: * 或你的域名。如果不这样做，尝试访问 buffered 或 Web Audio 时会抛出安全错误。

七、可访问性与用户体验优化

• 提供后备内容：在 ＜audio＞ 标签内放置下载链接，供不支持或无法播放的用户下载音频。

• 键盘导航：自定义按钮应使用 ＜button＞ 元素（天然支持键盘焦点和 Enter/Space 键），或为自定义元素添加 role="button" 和相应的键盘事件。

• 屏幕阅读器：使用 aria-label 描述按钮功能（如“播放”、“暂停”），并在播放状态变化时通过 aria-live 区域播报。

• 预加载策略：对于用户可能不会播放的音频（如列表中的预览），使用 preload="none" 节省流量；对于很可能播放的，用 preload="auto" 或 metadata。

• 错误恢复：监听 error 事件并提供用户友好的重试或提示。

八、常见问题与排查

总结

HTML ＜audio＞ 元素为 Web 平台带来了原生的音频播放能力，配合 JavaScript API 和 Web Audio API，你可以构建从简单背景音乐到复杂交互式音频应用的任何东西。通过本文的学习，你掌握了：

1. 基础用法：使用 ＜audio＞ 和 ＜source＞ 实现多格式兼容。

2. 自定义播放器：利用 play()、pause()、currentTime、volume 等属性和事件，打造风格一致且功能丰富的控制界面。

3. 音频可视化：借助 Web Audio API 实时绘制频谱，增加视觉吸引力。

4. 自动播放策略：理解浏览器的限制，并通过静音或用户手势来解决。

5. 媒体会话集成：在系统控制中心展示元数据并响应硬件控制。

6. 跨域与可访问性：正确处理 CORS，确保所有用户（包括使用辅助技术的用户）都能顺畅使用。

现在，你可以自信地在自己的项目中嵌入音频，并为用户提供专业级的音频体验。记住，始终测试不同浏览器和设备，以确保兼容性。动手尝试吧，让声音为你的网页注入活力！

​ 

阅读原文：原文链接