JavaScript Audio 对象知识点整理

更新时间：2025年07月08日 11:00:11 作者：泫凝

Audio对象是JavaScript内置的 API,用于在网页中播放音频文件,可以通过new Audio()创建音频对象,也可以使用HTMLAudioElement的各种方法控制音频播放,本文给大家介绍JavaScript Audio 对象知识点,感兴趣的朋友一起看看吧

📌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重要属性

属性	说明
`src`	设置音频文件的路径
`volume`	设置音量（范围 `0.0 ~ 1.0` ）
`currentTime`	获取/设置音频当前播放时间
`duration`	获取音频的总时长（秒）
`loop`	是否循环播放 (`true/false` )
`paused`	是否暂停状态 (`true/false` )

示例：

const sound = new Audio('sound/hit.mp3');
sound.volume = 0.5; // 设置音量 50%
console.log(`音频总时长：${sound.duration} 秒`);

📌3.Audio重要方法

方法	作用
`play()`	播放音频
`pause()`	暂停音频
`load()`	重新加载音频
`playbackRate`	设置播放速度（如 `1.5` 为 1.5 倍速播放）
`addEventListener('ended', callback)`	监听音频播放结束事件

示例：

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 对象支持多种事件，可以监听音频的状态：

事件	触发时机
`play`	开始播放时
`pause`	暂停时
`ended`	播放完毕
`error`	发生错误

示例：

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. 总结

需求	解决方案
简单播放音效	`new Audio('sound.mp3').play();`
防止音效被覆盖	每次创建新的 `Audio` 实例
监听播放状态	`addEventListener('ended', callback)`
避免浏览器拦截音频	用户点击事件后 `play()`
高级音效处理	`Web Audio API`

这样，你就可以在 three.js + cannon.js 中，使用 Audio 来播放碰撞音效啦！

到此这篇关于JavaScript Audio 对象知识点的文章就介绍到这了,更多相关js audio对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序前端自定义分享的实现方法
这篇文章主要给大家介绍了关于微信小程序前端自定义分享的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-06-06
一文解决微信小程序button、input和image表单组件
在微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等,下面这篇文章主要给大家介绍了关于如何通过一文解决微信小程序button、input和image表单组件的相关资料,需要的朋友可以参考下
2022-08-08
浅谈Javascript中的函数、this以及原型
下面小编就为大家带来一篇浅谈Javascript中的函数、this以及原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
JS保存、读取、换行、转Json报错处理方法
JS保存、读取换行转Json报错异常信息：Unexpected token ILLEGAL，具体解决方法如下，感性的朋友可以参考下哈
2013-06-06
js实现踩五彩块游戏
这篇文章主要为大家详细介绍了js实现踩五彩块游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
利用d3.js力导布局绘制资源拓扑图实例教程
这篇文章主要给大家介绍了关于如何利用d3.js力导布局绘制资源拓扑图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
JavaScript本地数据存储sessionStorage与localStorage使用详解
这篇文章主要介绍了JavaScript本地数据存储sessionStorage与localStorage使用，localStorage：永久存储在本地，适合保存在本地的数据。sessionStorage：会话级的存储，敏感帐号一次登陆
2022-10-10
JavaScript缓动动画函数的封装方法
这篇文章主要为大家详细介绍了JavaScript缓动动画函数的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
uniapp自定义验证码输入框并隐藏光标
这篇文章主要介绍了uniapp自定义验证码输入框隐藏光标,效果是点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示持续1s然后清空数据，恢复原边框样式，需要的朋友可以参考下
2023-02-02
Openlayers实现面积测量的方法
在Openlayers中,长度和面积的测量均依赖ol/sphere模块,长度通过getLength方法计算,面积则通过getArea方法,面积测量不是计算平面面积,而是基于球面,适用于多边形和多多边形集合,感兴趣的朋友一起看看吧
2024-11-11