浏览器兼容性
不同浏览器对音频格式的支持不同：
（图片来源网络，侵删）
- MP3: 几乎所有现代浏览器（Chrome, Firefox, Edge, Safari）都支持，但在旧版 Firefox 和 Safari 中可能不被原生支持。
- WAV: 无损音质，但文件体积巨大，兼容性很好，但网络传输效率低。
- Ogg (Vorbis): 开源格式，兼容性好，尤其在 Firefox 和 Opera 中表现优异。
最佳实践（兼容性方案）： 为了覆盖所有浏览器，你应该同时提供 MP3 和 Ogg 两种格式的音频文件，现代浏览器会自动选择它支持的格式播放，而老旧的浏览器也能至少找到一种可用的格式。
使用 HTML5 <audio> 标签（推荐）
这是最标准、最推荐的方法，语义清晰，且易于控制，我们通过 <source> 标签来提供多种格式的音频文件。
完整代码示例
这是一个完整的 HTML 文件，你可以直接复制保存为 .html 文件并在浏览器中打开测试。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">JS 兼容性播放声音示例</title>
<style>
body {
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 5px;
margin: 10px;
}
button:hover {
background-color: #e0e0e0;
}
#status {
margin-top: 20px;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<h1>JS 兼容性播放声音</h1>
<!--
HTML5 audio 标签，提供多种格式的音频源。
浏览器会按顺序尝试播放第一个它支持的格式。
-->
<audio id="myAudio" preload="auto">
<!-- 优先使用 Ogg 格式，Firefox 等浏览器支持 -->
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<!-- 其次是 MP3 格式，Chrome, Safari, Edge 等支持 -->
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
<!-- 如果浏览器不支持 audio 标签，显示此内容 -->
您的浏览器不支持 audio 元素。
</audio>
<div>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
<button id="stopBtn">停止</button>
</div>
<div id="status">准备就绪</div>
<script>
// 获取 audio 元素和按钮
const audio = document.getElementById('myAudio');
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const stopBtn = document.getElementById('stopBtn');
const statusDiv = document.getElementById('status');
// 监听音频加载和播放事件，更新状态
audio.addEventListener('canplaythrough', () => {
statusDiv.textContent = '音频已加载，可以播放';
});
audio.addEventListener('play', () => {
statusDiv.textContent = '正在播放...';
});
audio.addEventListener('pause', () => {
statusDiv.textContent = '已暂停';
});
audio.addEventListener('ended', () => {
statusDiv.textContent = '播放完毕';
});
// 播放按钮事件
playBtn.addEventListener('click', () => {
// 使用 .play() 方法播放音频
audio.play().catch(error => {
// 处理自动播放策略被阻止的情况（常见于移动端和 Chrome）
statusDiv.textContent = '播放失败，可能因为浏览器自动播放策略，请尝试手动点击页面任意位置后再试。';
console.error("播放失败:", error);
});
});
// 暂停按钮事件
pauseBtn.addEventListener('click', () => {
// 使用 .pause() 方法暂停音频
audio.pause();
});
// 停止按钮事件（注意：HTML5 audio 没有 stop 方法，我们通过暂停并重置时间来实现）
stopBtn.addEventListener('click', () => {
audio.pause(); // 先暂停
audio.currentTime = 0; // 将播放时间重置到 0
statusDiv.textContent = '已停止';
});
</script>
</body>
</html>
代码解析
-
<audio>:
（图片来源网络，侵删）id="myAudio": 用于在 JavaScript 中引用这个元素。preload="auto": 建议浏览器在页面加载时预加载音频文件，以便可以立即播放。<source>: 这是实现兼容性的关键。src: 指向音频文件的路径，请务必将这里的链接替换为你自己的音频文件路径。type: 指定音频文件的 MIME 类型，浏览器会根据这个类型来判断是否支持。
- 浏览器会从上到下检查
<source>标签，直到找到一个它支持的格式为止。
-
JavaScript 控制:
audio.play(): 播放音频。audio.pause(): 暂停音频。audio.currentTime = 0: 将播放进度重置到开头，常用于实现“停止”功能。.catch(error): 非常重要！ 现代浏览器（特别是 Chrome 和移动端 Safari）出于用户体验和节省流量的考虑，有严格的自动播放策略，如果音频没有用户交互（比如点击）就尝试播放，可能会被阻止。.play()方法会返回一个 Promise，如果播放失败，Promise 会被 reject，我们需要用.catch来捕获这个错误并向用户提示。
使用 new Audio() 对象（动态创建）
如果你不想在 HTML 中写 <audio> 标签，或者需要动态创建音频，可以使用 new Audio() 构造函数，这种方法同样兼容，但需要手动处理事件监听。
// 1. 创建 Audio 对象
const audio = new Audio();
// 2. 设置音频源（同样可以设置多个源，但 new Audio() 只能接受一个 URL）
// 为了兼容性，你需要用 JS 来判断浏览器支持哪种格式，或者提供一个默认格式。
// 更简单的方法是只提供一种最兼容的格式，或者提供一个回退逻辑。
// 这里我们直接使用 MP3，因为它在现代浏览器中普及率最高。
// 如果需要极致兼容，可以写一个函数来判断浏览器并返回正确的 URL。
audio.src = 'https://www.w3schools.com/html/horse.mp3';
// 3. （可选）设置预加载
audio.preload = 'auto';
// 4. 添加事件监听器
audio.addEventListener('canplaythrough', () => {
console.log('音频已加载');
});
audio.addEventListener('ended', () => {
console.log('播放完毕');
});
// 5. 播放控制
function playSound() {
audio.play().catch(e => console.error("自动播放失败:", e));
}
function pauseSound() {
audio.pause();
}
function stopSound() {
audio.pause();
audio.currentTime = 0;
}
// 调用函数
// playSound();
对比 <audio>:
- 优点: 更灵活，可以在需要时才创建音频对象，节省资源。
- 缺点: 需要手动管理事件监听，且直接设置
src只能指定一种格式，兼容性处理不如<audio>标签的<source>方案优雅。
使用 Web Audio API（高级，适用于游戏和复杂场景）
Web Audio API 提供了更强大、更底层的音频控制能力，如音效处理、空间音频、分析音频数据等，它不是用来播放简单的背景音乐的，而是用于游戏音效、音频可视化等。
（图片来源网络，侵删）
注意: Web Audio API 的兼容性也很好，但在实现上比 <audio> 标签复杂，且同样受自动播放策略限制。
// 1. 创建 AudioContext
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext();
// 2. 创建音频源
const audioElement = new Audio('https://www.w3schools.com 
