将PCM16音频转换为WAV并编码为Base64字符串的教程-js教程-PHP中文网

将pcm16音频转换为wav并编码为base64字符串的教程

本教程旨在解决从语音捕获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）转换为这个范围。

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

262

查看详情

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 < 0 ? int16 / 32768 : int16 / 32767: 这是将16位带符号整数（Int16）转换为归一化浮点数（Float32，范围-1到1）的关键转换公式。Int16的最小值为-32768，最大值为32767。负数除以其绝对最大值32768，正数除以其最大值32767，可以确保数据正确映射到-1到1的范围。

步骤三：将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<string>} 包含 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<Int16Array>
// 并且您的 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的需求。

以上就是将PCM16音频转换为WAV并编码为Base64字符串的教程的详细内容，更多请关注php中文网其它相关文章！