前端Wiki/HTML5/基础/多媒体

audio 音频

<audio> 让网页原生播放音频，不再需要任何插件。常用属性：controls 显示播放控件（不加则完全不可见，只做背景音需配 JS 控制）；autoplay 自动播放——注意现代浏览器普遍禁止"带声音的自动播放"，必须搭配 muted 才可能生效；loop 循环；preload 控制预加载策略（auto/metadata/none）。

格式方面：MP3 兼容性最好，AAC 次之，OGG 在部分浏览器支持。给一个 audio 配多个 <source> 可以做多格式兜底，浏览器选择第一个自己支持的。

audio 元素在 JS 里对应 HTMLAudioElement，拥有 play()、pause()、volume、currentTime 等成员，做自定义播放器就是隐藏原生 controls、用这些 API 自己画界面。

本节要点controls 显示控件、loop 循环、preload 控预加载；自动播放必须 muted 才可能被允许；格式首选 MP3，多 source 兜底；JS 通过 play/pause 等成员自定义播放器。

HTML

<!-- 基础用法：controls 显示原生控件 -->
<audio src="bgm.mp3" controls></audio>

<!-- 完整属性示例：循环 + 预加载元数据 -->
<audio src="bell.mp3" controls loop preload="metadata"></audio>

<!-- 多格式兜底：浏览器挑第一个支持的，都不支持则显示文字 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

<script>
  // JS 控制：播放、暂停、调音量
  var a = document.querySelector('audio');
  // a.play();  a.pause();  a.volume = 0.5;  a.currentTime = 10;
</script>

🔗 相关词条source 浏览器兼容性 JS 网页元素

📚 推荐阅读

ECharts 图表教程万象云档

PWA 应用实战万象云档

移动前端开发经验指南万象云档

Socket.IO v4 中文文档万象云档

Electron 27 中文文档万象云档

来自万象云档的免费在线书籍，点击封面直接阅读