JavaScript无法直接读写本地音频文件，但可通过Web Audio API加载（fetch+decodeAudioData）、播放（createBufferSource）、添加效果（Gain/BiquadFilter等节点）及与<audio>元素协同处理音频。
JavaScript 本身不能直接“读取”或“写入”本地音频文件（出于安全限制），但可以通过 Web Audio API 加载、解码、处理和播放音频资源。关键在于：先获取音频数据（如通过 fetch 或 <audio></audio> 元素），再交给 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);
与 <audio> 元素协同使用
如果已有 <audio> 标签（比如用于用户上传或播放控件），可通过 createMediaElementSource() 将其接入 Web Audio 流程，实现实时分析或效果叠加：
const audioEl = document.getElementById('my-audio');
const source = context.createMediaElementSource(audioEl);
source.connect(analyser); // 如接频谱分析器
source.connect(context.destination);
注意：此时应关闭 <audio> 的默认播放（设 muted=true），避免声音重复输出。
