本教程旨在解决从语音捕获SDK获取PCM16格式音频后，如何在浏览器环境中将其转换为标准的WAV文件，并最终编码为Base64字符串以供API传输。文章详细介绍了绕过浏览器`decodeAudioData`函数对原始PCM数据解码限制的方法，通过手动创建`AudioBuffer`、将PCM16样本转换为Float32格式，然后利用第三方库生成WAV文件，并最终使用`FileReader`将其转换为Base64字符串。
背景与挑战
在Web开发中，我们经常会遇到需要处理原始音频数据的场景，例如通过Web Audio API或第三方SDK捕获语音。一个常见的问题是，这些SDK可能返回原始的PCM16（16位脉冲编码调制）格式音频数据，而非标准的文件格式（如WAV、MP3）。当我们需要将这些原始数据发送到后端API时，通常要求它们是特定文件格式（如WAV）并以Base64字符串编码。
尝试直接使用AudioContext.decodeAudioData()方法来解码原始PCM16数据时，会遇到兼容性问题或错误，例如“DOMException: The buffer passed to decodeAudioData contains an unknown content type.”。这是因为decodeAudioData()主要用于解码已编码的音频文件（如WAV、MP3、AAC等），而不是原始的、未封装的PCM数据。
因此，解决方案的关键在于手动构建一个Web Audio API的AudioBuffer，将PCM16数据转换为其可接受的浮点数格式，然后利用现有工具将其转换为WAV，并最终编码为Base64。
解决方案概述
整个转换过程可以分为以下几个核心步骤：
- 从SDK获取PCM16格式的音频样本。
- 手动创建一个AudioBuffer实例。
- 将PCM16样本数据（Int16Array）转换为Float32Array，并将其复制到AudioBuffer中。
- 使用audiobuffer-to-wav等库将AudioBuffer转换为WAV格式的ArrayBuffer。
- 将WAV格式的ArrayBuffer进一步转换为Base64字符串。
详细实现步骤
步骤一：获取PCM16音频样本
假设您的语音捕获SDK提供了一个类似以下的方法来获取PCM16音频数据：
async getRecordedAudioPcm16Samples() {
// 假设 this.audioBuffers 包含了分段的 Int16Array 音频数据
let audio = new Int16Array(this.numRecordedSamples);
let offset = 0;
for (let i = 0; i < this.audioBuffers.length; i++) {
audio.set(this.audioBuffers[i], offset);
offset += this.audioBuffers[i].length;
}
return audio; // 返回一个 Int16Array
}调用此方法将获得一个Int16Array，其中包含了原始的PCM16音频样本。
步骤二：手动创建并填充AudioBuffer
由于decodeAudioData无法处理原始PCM，我们需要手动构建AudioBuffer。AudioBuffer需要Float32Array格式的样本数据，范围在-1到1之间。因此，我们需要将PCM16（范围通常是-32768到32767）转换为这个范围。
import toWav from 'audiobuffer-to-wav';
async function convertPcm16ToWavBase64(pcm16AudioData, sampleRate = 48000) {
// 1. 创建 AudioBuffer
// pcm16AudioData 是一个 Int16Array
const length = pcm16AudioData.length;
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建一个单声道（1个通道）的 AudioBuffer
const audioBuffer = audioContext.createBuffer(1, length, sampleRate);
const channelData = audioBuffer.getChannelData(0); // 获取 AudioBuffer 的 Float32Array 视图
// 2. 将 Int16Array 样本转换为 Float32Array
for (let i = 0; i < length; i += 1) {
const int16 = pcm16AudioData[i];
// 将 Int16 转换为 Float32，范围从 [-32768, 32767] 映射到 [-1, 1]
// 注意：负数除以 32768，正数除以 32767
const f32 = int16 < 0 ? int16 / 32768 : int16 / 32767;
channelData[i] = f32;
}
// 至此，audioBuffer 已经包含了正确的音频数据
// 接下来可以将其转换为 WAV
// ... 后续步骤
return audioBuffer;
}关键点解释：
- audioContext.createBuffer(numberOfChannels, length, sampleRate): 创建一个新的AudioBuffer。numberOfChannels通常为1（单声道）或2（立体声）。length是音频样本的总数。sampleRate是音频的采样率，必须与原始PCM数据的采样率一致。
- audioBuffer.getChannelData(0): 获取指定声道（这里是第一个声道）的Float32Array，我们将在其中填充数据。
- int16
步骤三：将AudioBuffer转换为WAV格式
一旦AudioBuffer被正确填充，我们就可以使用audiobuffer-to-wav这样的第三方库将其转换为WAV格式的ArrayBuffer。
首先，确保您已安装该库：
npm install audiobuffer-to-wav # 或 yarn add audiobuffer-to-wav
然后，在您的代码中使用它：
import toWav from 'audiobuffer-to-wav';
// ... (接续上一步的 convertPcm16ToWavBase64 函数)
async function convertPcm16ToWavBase64(pcm16AudioData, sampleRate = 48000) {
// ... (手动创建并填充 audioBuffer 的代码) ...
const audioBuffer = await createAudioBufferFromPcm16(pcm16AudioData, sampleRate); // 假设这个函数返回 audioBuffer
// 3. 将 AudioBuffer 转换为 WAV ArrayBuffer
// toWav 返回一个 ArrayBuffer，表示 WAV 文件内容
const wavArrayBuffer = toWav(audioBuffer);
// ... 后续步骤
return wavArrayBuffer;
}
// 辅助函数，将创建 AudioBuffer 的逻辑封装
async function createAudioBufferFromPcm16(pcm16AudioData, sampleRate) {
const length = pcm16AudioData.length;
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const audioBuffer = audioContext.createBuffer(1, length, sampleRate);
const channelData = audioBuffer.getChannelData(0);
for (let i = 0; i < length; i += 1) {
const int16 = pcm16AudioData[i];
const f32 = int16 < 0 ? int16 / 32768 : int16 / 32767;
channelData[i] = f32;
}
return audioBuffer;
}步骤四：将WAV ArrayBuffer转换为Base64字符串
最后一步是将WAV格式的ArrayBuffer转换为Base64字符串。这可以通过创建一个Blob对象，然后使用FileReader的readAsDataURL方法来实现。
// ... (接续上一步的 convertPcm16ToWavBase64 函数)
async function convertPcm16ToWavBase64(pcm16AudioData, sampleRate = 48000) {
const audioBuffer = await createAudioBufferFromPcm16(pcm16AudioData, sampleRate);
const wavArrayBuffer = toWav(audioBuffer);
// 4. 将 WAV ArrayBuffer 转换为 Base64 字符串
return new Promise((resolve, reject) => {
// 创建一个 Blob 对象，指定 MIME 类型为 'audio/wav'
const wavBlob = new Blob([wavArrayBuffer], { type: 'audio/wav' });
const reader = new FileReader();
reader.onloadend = () => {
// reader.result 将是 data:audio/wav;base64,... 格式的字符串
resolve(reader.result);
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(wavBlob);
});
}完整示例代码
将所有步骤整合在一起，以下是一个完整的函数，用于将PCM16音频数据转换为Base64编码的WAV字符串：
import toWav from 'audiobuffer-to-wav';
/**
* 将 PCM16 (Int16Array) 音频数据转换为 Base64 编码的 WAV 字符串。
*
* @param {Int16Array} pcm16AudioData 原始的 PCM16 音频样本。
* @param {number} sampleRate 音频的采样率，必须与原始 PCM 数据一致。
* @returns {Promise} 包含 Base64 编码 WAV 数据的 Promise。
*/
async function pcm16ToWavBase64(pcm16AudioData, sampleRate) {
if (!pcm16AudioData || pcm16AudioData.length === 0) {
throw new Error("PCM16 audio data cannot be empty.");
}
if (!sampleRate || sampleRate <= 0) {
throw new Error("Invalid sample rate provided.");
}
// 1. 创建 AudioBuffer 并填充数据
const length = pcm16AudioData.length;
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建一个单声道 AudioBuffer
const audioBuffer = audioContext.createBuffer(1, length, sampleRate);
const channelData = audioBuffer.getChannelData(0);
for (let i = 0; i < length; i += 1) {
const int16 = pcm16AudioData[i];
// 将 Int16 转换为 Float32，范围从 [-32768, 32767] 映射到 [-1, 1]
const f32 = int16 < 0 ? int16 / 32768 : int16 / 32767;
channelData[i] = f32;
}
// 2. 将 AudioBuffer 转换为 WAV ArrayBuffer
const wavArrayBuffer = toWav(audioBuffer);
// 3. 将 WAV ArrayBuffer 转换为 Base64 字符串
return new Promise((resolve, reject) => {
const wavBlob = new Blob([wavArrayBuffer], { type: 'audio/wav' });
const reader = new FileReader();
reader.onloadend = () => {
resolve(reader.result); // 结果为 data:audio/wav;base64,... 格式
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(wavBlob);
});
}
// 示例用法：
// 假设 sdk.getRecordedAudioPcm16Samples() 返回一个 Promise
// 并且您的 SDK 捕获的采样率是 48000 Hz
// sdk.getRecordedAudioPcm16Samples().then(pcm16Audio => {
// pcm16ToWavBase64(pcm16Audio, 48000)
// .then(base64WavString => {
// console.log("Base64 WAV String:", base64WavString);
// // 现在您可以将这个 base64WavString 发送到您的 API
// })
// .catch(error => {
// console.error("转换失败:", error);
// });
// }); 注意事项与最佳实践
- 采样率（Sample Rate）一致性： 确保在创建AudioBuffer时使用的sampleRate与您的SDK实际捕获的PCM16音频的采样率完全一致。不匹配的采样率会导致音频播放速度异常或失真。
- 声道数（Channels）： 本教程示例假定是单声道（1个通道）。如果您的PCM16数据是立体声（2个通道），您需要修改audioContext.createBuffer()的第一个参数为2，并为每个通道单独处理channelData。
- 错误处理： 在实际应用中，应加入更健壮的错误处理机制，例如检查pcm16AudioData是否为空，以及FileReader的错误回调。
- 性能考量： 对于非常长的音频文件，Int16Array到Float32Array的转换以及后续的Blob和Base64编码可能会消耗较多的内存和CPU资源。考虑对大型文件进行分块处理或使用Web Workers来避免阻塞主线程。
- MIME类型： 在创建Blob时，type: 'audio/wav'是至关重要的，它告诉FileReader和接收API数据的服务器该数据的MIME类型。
总结
通过本教程，我们学习了如何在浏览器环境中，将原始的PCM16音频数据转换为WAV格式，并最终编码为Base64字符串。核心在于理解AudioContext.decodeAudioData()的局限性，并采用手动创建AudioBuffer并进行样本格式转换的方法。结合audiobuffer-to-wav库和FileReader，我们可以构建一个稳定可靠的解决方案，满足将原始音频数据发送到API的需求。
