音频基础概念

什么是HTML音频？

HTML5引入了<audio>标签，允许我们在网页中直接嵌入音频文件，无需插件（如Flash）。就像在网页中插入图片一样简单！

为什么要使用HTML音频？

• 🚀 原生支持：现代浏览器都内置支持
• 📱 移动友好：在手机和平板上表现良好
• ⚡ 加载更快：比使用Flash等插件更高效
• 🎛️ 控制灵活：可通过JavaScript轻松控制和自定义

基本音频格式

不同浏览器支持不同的音频格式，常见的有：

• MP3：最广泛支持，文件较小
• WAV：无损音质，但文件较大
• OGG：开放格式，专利免费

<audio>标签详解

基本语法

最简单的音频嵌入方式：

<audio src="music.mp3" controls>
  您的浏览器不支持音频播放
</audio>

关键属性

• src：音频文件路径
• controls：显示浏览器默认控制面板
• autoplay：页面加载时自动播放（谨慎使用）
• loop：循环播放音频
• muted：默认静音
• preload：预加载设置（auto/metadata/none）

多格式支持

为兼容不同浏览器，可以提供多种格式：

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  您的浏览器不支持HTML5音频
</audio>

JavaScript音频控制

基本控制方法

• play()：开始播放音频
• pause()：暂停音频
• load()：重新加载音频

常用属性

• currentTime：获取/设置当前播放位置（秒）
• duration：获取音频总时长
• volume：音量大小（0.0到1.0）
• paused：是否处于暂停状态
• ended：是否播放完毕

示例代码

// 获取音频元素
const audio = document.getElementById("myAudio");

// 播放音频
audio.play();

// 跳转到30秒位置
audio.currentTime = 30;

// 设置50%音量
audio.volume = 0.5;

音频事件处理

常用音频事件

• play：音频开始播放时触发
• pause：音频暂停时触发
• ended：音频播放结束时触发
• timeupdate：当前播放位置改变时触发
• volumechange：音量改变时触发
• loadeddata：音频第一帧加载完成时触发

事件监听示例

const audio = document.getElementById("myAudio");

// 播放事件
audio.addEventListener("play", function() {
    console.log("音频开始播放");
});

// 时间更新事件
audio.addEventListener("timeupdate", function() {
    const percent = (audio.currentTime / audio.duration) * 100;
    console.log(`已播放: ${percent.toFixed(1)}%`);
});

// 结束事件
audio.addEventListener("ended", function() {
    console.log("播放结束");
    audio.currentTime = 0; // 重置到开头
});

音频进阶技巧

自定义播放器

隐藏默认控制面板，创建自己的播放器界面：

<audio id="customAudio" src="music.mp3"></audio>

<div id="customPlayer">
  <button id="playBtn">播放</button>
  <input type="range" id="progress" min="0" max="100">
  <input type="range" id="volume" min="0" max="100">
</div>

流媒体支持

使用MSE（Media Source Extensions）可以实现：

• 自适应比特率流
• 实时流媒体
• 分段加载

Web Audio API

用于高级音频处理：

• 音频可视化
• 音效处理（混响、均衡器等）
• 空间音频（3D音效）
• 音频合成

最佳实践与注意事项

性能优化

• 📦 压缩音频文件（MP3比WAV小很多）
• 🌐 使用CDN加速音频加载
• 🔄 设置正确的preload属性
• 🔇 移动设备上避免自动播放

无障碍设计

• 提供文字替代内容
• 添加字幕/文字稿
• 确保控制元素可通过键盘操作
• 提供音量控制

常见问题解决

• 无法播放：检查文件路径和格式支持
• 没有声音：检查静音状态和音量设置
• 跨域问题：确保服务器配置正确的CORS头