Web Audio API 可实现网页端高精度音频编辑：先创建 AudioContext 并用 fetch 获取音频，再 decodeAudioData 解码为 AudioBuffer；接着按时间计算采样点截取片段；最后通过生成 WAV 头部、PCM 转换与 Blob 封装导出剪辑结果。
如果您希望在网页中对音频文件进行剪切、混音等编辑操作，HTML5 提供的 Web Audio API 可以实现高精度的音频处理。以下是使用 Web Audio API 编辑歌曲的具体方法：
一、加载并解码音频文件
Web Audio API 要求音频数据为解码后的 AudioBuffer 格式，因此需先通过 fetch 或 XMLHttpRequest 获取音频资源，并用 audioContext.decodeAudioData 进行异步解码。
1、创建 AudioContext 实例：const audioContext = new (window.AudioContext || window.webkitAudioContext)();
2、使用 fetch 获取音频文件二进制数据：fetch('song.mp3').then(response => response.arrayBuffer());
立即学习“前端免费学习笔记（深入）”；
3、将 ArrayBuffer 解码为 AudioBuffer：audioContext.decodeAudioData(arrayBuffer).then(buffer => { /* 缓冲区就绪 */ });
二、剪切音频片段
通过复制 AudioBuffer 的指定时间区间数据，可生成新缓冲区实现无损剪切。需将时间转换为采样点索引进行截取。
1、确定起始与结束时间（单位：秒）：const startTime = 10; const endTime = 30;
2、计算对应采样点位置：const startOffset = Math.floor(startTime * buffer.sampleRate); const endOffset = Math.floor(endTime * buffer.sampleRate);
3、创建新 AudioBuffer 并复制声道数据：const newBuffer = audioContext.createBuffer(buffer.numberOfChannels, endOffset - startOffset, buffer.sampleRate); for (let channel = 0; channel
三、实现淡入淡出效果
淡入淡出通过修改 AudioBuffer 中起始/结尾若干毫秒的样本幅值实现线性或指数渐变，避免爆音。
1、设定淡入时长（如 100ms）：const fadeDuration = 0.1;
2、计算淡入采样点数：const fadeLength = Math.floor(fadeDuration * buffer.sampleRate);
3、对每个声道前 fadeLength 个样本应用线性增益：for (let i = 0; i ain = i / fadeLength; channelData[i] *= gain; }
4、对末尾 fadeLength 个样本应用线性衰减：for (let i = 0; i
四、叠加两个音频轨道进行混音
混音本质是将多个 AudioBuffer 同一时刻的样本值相加后归一化，防止溢出。需确保所有缓冲区采样率一致且长度对齐。
1、获取两个已解码的 AudioBuffer：const bufferA = ...; const bufferB = ...;
2、创建目标缓冲区（长度取二者最大值）：const mixLength = Math.max(bufferA.length, bufferB.length); const mixedBuffer = audioContext.createBuffer(bufferA.numberOfChannels, mixLength, bufferA.sampleRate);
3、逐声道逐样本叠加并限制幅值：for (let channel = 0; channel
五、导出编辑后的音频为 Blob
浏览器不直接支持将 AudioBuffer 写入 WAV/MP3，需手动构造 WAV 文件头并拼接 PCM 数据，再封装为 Blob 供下载。
1、定义 WAV 头部结构（44 字节标准 RIFF 头）：const writeWavHeader = (buffer, length) => { const header = new ArrayBuffer(44); const view = new DataView(header); ... };
2、将 AudioBuffer 的 PCM 数据转为 16 位有符号整数数组：const interleaved = interleave(buffer); const wavBuffer = new ArrayBuffer(44 + interleaved.length * 2);
3、合并头部与 PCM 数据并生成 Blob：const blob = new Blob([wavBuffer], { type: 'audio/wav' }); const url = URL.createObjectURL(blob);
