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对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

用js来刷新当前页面保留参数的具体实现
本文为大家详细介绍下如何使用js来刷新当前页面保留参数，下面有个不错的实现大家可以看看
2013-12-12
JS Ajax请求如何防止重复提交
这篇文章主要介绍了JS Ajax请求如何防止重复提交的相关资料，通过覆盖掉$.ajax而达到防止重复提交的问题，实现代码简单，需要的朋友可以参考下
2016-06-06
Three.js实现浏览器变动时进行自适应的方法
这篇文章主要给大家介绍了关于Three.js实现浏览器变动时进行自适应的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2017-09-09
TypeScript中的never类型你了解吗
TypeScript 中的 never 类型,表示：永远不会发生的值的类型,换句话说,就是不可能存在的类型,即没有值的类型,那么你了解TypeScript中的never类型吗,感兴趣的朋友跟着小编一起来看看吧
2023-10-10
微信小程序新增的拖动组件movable-view使用教程
这篇文章主要给大家介绍了微信小程序最近新增的拖动组件movable-view的简单使用教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
RequireJS入门一之实现第一个例子
RequireJS由James Burke创建，他也是AMD规范的创始人。大家知道我们为什么要学习requirejs吗？带着这个疑问来学习本篇文章吧，感兴趣的朋友一起学习RequireJS入门一之实现第一个例子吧
2015-09-09
JS动态日期时间的获取方法
这篇文章主要介绍了js获得当前系统日期时间的方法，涉及javascript操作日期时间的相关技巧，非常简单实用，需要的朋友可以参考下
2015-09-09
鼠标右击事件代码(asp.net后台)
本程序由一个js文件和aspx文件组成，没有后台CS代码。
2011-01-01
轻松实现Bootstrap图片轮播
这篇文章主要介绍了全面解析Bootstrap图片轮播效果，Bootstrap提供了carousel插件，实现图片轮播非常方便，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01
uniapp获取底部安全距离以及状态栏高度等
最近在用uniapp开发的时候遇到了一些问题,下面这篇文章主要给大家介绍了关于uniapp获取底部安全距离以及状态栏高度等的相关资料,需要的朋友可以参考下
2022-10-10