JavaScript Audio 对象知识点整理
作者：泫凝
Audio 对象是 JavaScript 内置的 API，用于在网页中播放音频文件。可以通过 new Audio() 创建音频对象，也可以使用 HTMLAudioElement 的各种方法控制音频播放。
📌1. 创建Audio对象
方法 1：使用new Audio()
const sound = new Audio('sound/hit.mp3');
sound.play();- 适合简单的音效播放
- 但同一个
Audio实例同时只能播放一个音效，如果短时间内多次触发，会导致音频被打断
方法 2：使用document.createElement('audio')
const sound = document.createElement('audio');
sound.src = 'sound/hit.mp3';
document.body.appendChild(sound);
sound.play();- 适用于更复杂的音频控制，比如动态修改
src或监听ended事件。
📌2.Audio重要属性
属性 | 说明 |
| 设置音频文件的路径 |
| 设置音量（范围 ） |
| 获取/设置音频当前播放时间 |
| 获取音频的总时长（秒） |
| 是否循环播放 ( ) |
| 是否暂停状态 ( ) |
示例：
const sound = new Audio('sound/hit.mp3');
sound.volume = 0.5; // 设置音量 50%
console.log(`音频总时长：${sound.duration} 秒`);📌3.Audio重要方法
方法 | 作用 |
| 播放音频 |
| 暂停音频 |
| 重新加载音频 |
| 设置播放速度（如 为 1.5 倍速播放） |
| 监听音频播放结束事件 |
示例：
const sound = new Audio('sound/hit.mp3');
// 播放音频
sound.play();
// 2秒后暂停
setTimeout(() => {
sound.pause();
console.log('音频已暂停');
}, 2000);📌4. 处理多个音效
如果想在短时间内播放多个音效（比如游戏中的子弹声音），使用 多个 Audio 实例：
const playSound = () => {
const sound = new Audio('sound/hit.mp3');
sound.volume = Math.random(); // 随机音量
sound.play();
};
document.addEventListener('click', playSound);这样可以避免 Audio 被覆盖的问题。
📌5. 解决浏览器的自动播放限制
现代浏览器禁止网页自动播放音频，需要用户交互（如点击）后才能播放：
document.addEventListener('click', () => {
const sound = new Audio('sound/hit.mp3');
sound.play().catch(err => console.log('音频播放失败:', err));
}, { once: true });catch()处理播放失败的情况{ once: true }确保只触发一次
📌6. 监听音频事件
Audio 对象支持多种事件，可以监听音频的状态：
事件 | 触发时机 |
| 开始播放时 |
| 暂停时 |
| 播放完毕 |
| 发生错误 |
示例：
const sound = new Audio('sound/hit.mp3');
sound.addEventListener('ended', () => {
console.log('音频播放完毕');
});
sound.play();📌7. 使用Web Audio API（高级玩法）
如果需要更精细的音效控制，比如：
- 3D 音效
- 混音
- 音频可视化 可以使用 Web Audio API：
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const sound = new Audio('sound/hit.mp3');
const track = audioContext.createMediaElementSource(sound);
track.connect(audioContext.destination);
sound.play();但相比 Audio，Web Audio API 更复杂，适合需要高级音效处理的场景。
📌8. 总结
需求 | 解决方案 |
简单播放音效 |
|
防止音效被覆盖 | 每次创建新的 实例 |
监听播放状态 |
|
避免浏览器拦截音频 | 用户点击事件后 |
高级音效处理 |
|
这样，你就可以在 three.js + cannon.js 中，使用 Audio 来播放碰撞音效啦！
到此这篇关于JavaScript Audio 对象知识点的文章就介绍到这了,更多相关js audio对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！