怎么使用HTML5中AudioContext的AudioBufferSourceNode播放内存中的音频-H5教程-PHP中文网

核心是解码音频数据为audiobuffer，再用audiobuffersourcenode加载并播放：先在用户交互后创建audiocontext，fetch或filereader获取arraybuffer；再decodeaudiodata异步解码；然后createbuffersource、赋buffer、connect、start播放，节点一次性需复用时新建source。

怎么使用html5中audiocontext的audiobuffersourcenode播放内存中的音频

使用 AudioContext 的 AudioBufferSourceNode 播放内存中的音频，核心是：先解码音频数据（如 ArrayBuffer），得到 AudioBuffer，再用 AudioBufferSourceNode 加载并播放它。整个过程不依赖 <audio></audio> 标签，完全在内存中完成。

1. 创建 AudioContext 并加载音频数据

确保在用户交互（如点击）后创建 AudioContext（避免 iOS/Safari 自动静音限制）。音频数据通常来自 fetch、FileReader 或预存的 ArrayBuffer：

用 fetch('sound.mp3').then(res => res.arrayBuffer()) 获取二进制数据
或从 <input type="file"> 中读取 file.arrayBuffer()
注意：不能直接传入 Base64 字符串，需先转为 ArrayBuffer

2. 解码音频数据为 AudioBuffer

AudioContext.decodeAudioData() 是异步方法，将原始音频字节（MP3/WAV/OGG 等）转为可播放的 AudioBuffer：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

context.decodeAudioData(arrayBuffer)
  .then(buffer => {
    // buffer 就是解码后的音频数据，可多次复用
  })
  .catch(err => console.error('解码失败:', err));

同一 AudioBuffer 可被多个 AudioBufferSourceNode 同时使用（适合重复播放）
解码失败常见原因：格式不支持、数据损坏、跨域未配 CORS

3. 创建并配置 AudioBufferSourceNode

调用 context.createBufferSource() 创建节点，把 AudioBuffer 赋给其 buffer 属性：

const source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination); // 连接到扬声器

必须显式调用 connect()，否则无声
可连接其他节点（如 GainNode 控制音量、BiquadFilterNode 做滤波）
source.loop = true 开启循环播放

4. 播放与生命周期管理

调用 start() 触发播放（支持指定开始时间，单位为秒）：

// 立即播放
source.start();

// 延迟 0.5 秒后播放（相对于当前 context.currentTime）
source.start(context.currentTime + 0.5);

// 播放 2 秒后自动停止
source.start(context.currentTime, 0, 2);