菜鸟-创作你的创作

JavaScript Audio 对象知识点整理

lichongyang

下面给你一份 《JavaScript Audio 对象知识点整理（最全最清晰）》，涵盖基础用法、属性方法、事件、实战技巧，非常适合做笔记或写教程。

🎵 JavaScript Audio 对象知识点整理（Audio API 全面总结）

JavaScript 中播放音频通常有两种方式：

  1. 使用 HTML <audio> 标签
  2. 使用 JavaScript 的 Audio 对象（HTMLAudioElement）

你可以理解为：
new Audio() = 创建一个 元素

⭐ 1. Audio 对象的创建方式

✔ 方式一：直接 new Audio()

const audio = new Audio('music.mp3');
audio.play();

✔ 方式二：通过 DOM 获取

&lt;audio id="bg" src="music.mp3">&lt;/audio>


const audio = document.getElementById('bg');
audio.play();

两者最终都得到同一个类型：HTMLAudioElement

⭐ 2. 常用属性（必须掌握）

属性说明
src音频路径
currentTime当前播放时间(秒)
duration音频总时长（秒）
paused是否暂停状态（只读）
loop是否循环播放
volume音量（0~1）
muted是否静音
autoplay是否自动播放
controls是否显示原生控件
playbackRate播放速度
ended是否播放结束（只读）

常用示例

audio.volume = 0.5;
audio.currentTime = 10;
audio.loop = true;
audio.playbackRate = 1.25;

⭐ 3. 常用方法（操作音频）

方法说明
play()播放（Promise）
pause()暂停
load()重新加载音频
canPlayType(type)是否支持该格式

示例：

audio.play();
audio.pause();
audio.currentTime = 0;  // 重新开始

⭐ 4. Audio 的常用事件（非常重要）

事件名触发时机
play调用了 play()
pause调用了 pause()
ended播放结束
timeupdate播放进度改变
loadeddata媒体资源加载完成
error播放错误
canplay可以开始播放
progress加载数据中

示例：

audio.addEventListener('timeupdate', () => {
  console.log(audio.currentTime);
});

audio.addEventListener('ended', () => {
  console.log('播放结束');
});

⭐ 5. Audio 进阶使用技巧（实战重点）

✔ 1）浏览器默认禁止自动播放（Autoplay Policy）

如果你这样写：

audio.play();

浏览器可能会报错：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

应对方法：

✔ 让用户先点击
✔ 或设置为静音 autoPlay（视频常用）

audio.muted = true;
audio.play();

✔ 2）实时展示播放进度

audio.addEventListener('timeupdate', () => {
  progress.value = audio.currentTime / audio.duration * 100;
});

✔ 3）播放完成后重新开始

audio.addEventListener('ended', () => {
  audio.currentTime = 0;
  audio.play();
});

或直接：

audio.loop = true;

✔ 4）改变播放速度

audio.playbackRate = 2;  // 2倍速

✔ 5）预加载控制

&lt;audio preload="none">&lt;/audio>

preload 可选值：

值含义
none不预加载
metadata只加载元数据（时长等）
auto尽量自动加载

⭐ 6. Audio 对象 vs Web Audio API（面试常问）

对比项Audio 对象Web Audio API
用途简单播放专业音频处理
控制粒度低高（混音、滤波器、频谱分析）
使用难度简单复杂
是否能做可视化❌✔（频谱、音效）

⭐ 7. 常见实战代码片段合集

✔ 切换播放/暂停按钮

if (audio.paused) {
  audio.play();
} else {
  audio.pause();
}

✔ 判断浏览器支持哪种音频格式

audio.canPlayType('audio/mp3');  // maybe / probably / ""
audio.canPlayType('audio/ogg');

✔ 音量渐变（淡入淡出）

let vol = 0;
audio.volume = 0;
audio.play();

const timer = setInterval(() => {
  if (vol &lt; 1) {
    vol += 0.1;
    audio.volume = vol;
  } else {
    clearInterval(timer);
  }
}, 100);

🎯 8. Audio 知识点大总结（30 秒背诵版本）

Audio 对象是 HTMLAudioElement，本质是 <audio> 标签。
主要属性有 src、currentTime、duration、volume、loop、muted。
常用方法为 play()、pause()、load()。
常用事件包括 timeupdate、ended、play、pause、loadeddata。
浏览器有自动播放限制，需要用户交互。
Audio 适合简单播放，复杂音频处理使用 Web Audio API。

退出移动版