快捷導(dǎo)航

JavaScript Audio 對象知識點整理

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

Audio對象是JavaScript內(nèi)置的 API,用于在網(wǎng)頁中播放音頻文件,可以通過new Audio()創(chuàng)建音頻對象,也可以使用HTMLAudioElement的各種方法控制音頻播放,本文給大家介紹JavaScript Audio 對象知識點,感興趣的朋友一起看看吧

??1. 創(chuàng)建Audio對象

方法 1：使用new Audio()

const sound = new Audio('sound/hit.mp3');
sound.play();

適合簡單的音效播放
但同一個 Audio 實例同時只能播放一個音效，如果短時間內(nèi)多次觸發(fā)，會導(dǎo)致音頻被打斷

方法 2：使用document.createElement('audio')

const sound = document.createElement('audio');
sound.src = 'sound/hit.mp3';
document.body.appendChild(sound);
sound.play();

適用于更復(fù)雜的音頻控制，比如動態(tài)修改 src 或監(jiān)聽 ended 事件。

??2.Audio重要屬性

屬性	說明
`src`	設(shè)置音頻文件的路徑
`volume`	設(shè)置音量（范圍 `0.0 ~ 1.0` ）
`currentTime`	獲取/設(shè)置音頻當(dāng)前播放時間
`duration`	獲取音頻的總時長（秒）
`loop`	是否循環(huán)播放 (`true/false` )
`paused`	是否暫停狀態(tài) (`true/false` )

示例：

const sound = new Audio('sound/hit.mp3');
sound.volume = 0.5; // 設(shè)置音量 50%
console.log(`音頻總時長：${sound.duration} 秒`);

??3.Audio重要方法

方法	作用
`play()`	播放音頻
`pause()`	暫停音頻
`load()`	重新加載音頻
`playbackRate`	設(shè)置播放速度（如 `1.5` 為 1.5 倍速播放）
`addEventListener('ended', callback)`	監(jiān)聽音頻播放結(jié)束事件

示例：

const sound = new Audio('sound/hit.mp3');
// 播放音頻
sound.play();
// 2秒后暫停
setTimeout(() => {
    sound.pause();
    console.log('音頻已暫停');
}, 2000);

??4. 處理多個音效

如果想在短時間內(nèi)播放多個音效（比如游戲中的子彈聲音），使用多個 Audio 實例：

const playSound = () => {
    const sound = new Audio('sound/hit.mp3');
    sound.volume = Math.random(); // 隨機音量
    sound.play();
};
document.addEventListener('click', playSound);

這樣可以避免 Audio 被覆蓋的問題。

??5. 解決瀏覽器的自動播放限制

現(xiàn)代瀏覽器禁止網(wǎng)頁自動播放音頻，需要用戶交互（如點擊）后才能播放：

document.addEventListener('click', () => {
    const sound = new Audio('sound/hit.mp3');
    sound.play().catch(err => console.log('音頻播放失敗:', err));
}, { once: true });

catch() 處理播放失敗的情況
{ once: true } 確保只觸發(fā)一次

??6. 監(jiān)聽音頻事件

Audio 對象支持多種事件，可以監(jiān)聽音頻的狀態(tài)：

事件	觸發(fā)時機
`play`	開始播放時
`pause`	暫停時
`ended`	播放完畢
`error`	發(fā)生錯誤

示例：

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 更復(fù)雜，適合需要高級音效處理的場景。

??8. 總結(jié)

需求	解決方案
簡單播放音效	`new Audio('sound.mp3').play();`
防止音效被覆蓋	每次創(chuàng)建新的 `Audio` 實例
監(jiān)聽播放狀態(tài)	`addEventListener('ended', callback)`
避免瀏覽器攔截音頻	用戶點擊事件后 `play()`
高級音效處理	`Web Audio API`