JavaScript无法直接读写本地音频文件,但可通过Web Audio API加载(fetch+decodeAudioData)、播放(createBufferSource)、添加效果(Gain/BiquadFilter等节点)及与元素协同处理音频。

JavaScript 本身不能直接“读取”或“写入”本地音频文件(出于安全限制),但可以通过 Web Audio API 加载、解码、处理和播放音频资源。关键在于:先获取音频数据(如通过 fetch 或 元素),再交给 Web Audio API 进行精细控制。
加载音频并接入音频上下文
Web Audio API 的所有操作都基于一个 AudioContext 实例,它是整个音频处理系统的入口。加载音频通常分两步:
- 用
fetch()获取音频文件的二进制数据(如 MP3、WAV、OGG) - 调用
context.decodeAudioData()将其解码为可处理的AudioBuffer
示例代码:
const context = new (window.AudioContext || window.webkitAudioContext)();
fetch('sound.mp3')
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
.then(buffer => {
// buffer 是解码后的音频数据,可用于播放或处理
playBuffer(buffer);
});
播放音频缓冲区(最基础用法)
拿到 AudioBuffer 后,用 context.createBufferSource() 创建音源节点,连接到输出(如 context.destination),再调用 start() 播放:
立即学习“Java免费学习笔记(深入)”;
function playBuffer(buffer) {
const source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(); // 立即播放
}
注意:start() 支持时间参数(如 source.start(0, 1.5) 表示从第 1.5 秒开始播放),适合做精准播放控制。
添加效果与实时处理
Web Audio API 的强大之处在于节点式架构。你可以在音源和输出之间插入各种处理节点:
-
context.createGain():调节音量(增益) -
context.createBiquadFilter():实现高低通、带通等滤波 -
context.createConvolver():加载脉冲响应,实现混响 -
context.createScriptProcessor()(已废弃)→ 推荐用AudioWorklet做自定义实时处理
例如加一个简单的音量淡入:
const gainNode = context.createGain(); gainNode.gain.setValueAtTime(0, context.currentTime); gainNode.gain.linearRampToValueAtTime(1, context.currentTime + 2); // 2秒内从0升到1 source.connect(gainNode); gainNode.connect(context.destination);
与
如果已有 标签(比如用于用户上传或播放控件),可通过 createMediaElementSource() 将其接入 Web Audio 流程,实现实时分析或效果叠加:
const audioEl = document.getElementById('my-audio');
const source = context.createMediaElementSource(audioEl);
source.connect(analyser); // 如接频谱分析器
source.connect(context.destination);
注意:此时应关闭 的默认播放(设 muted=true),避免声音重复输出。










