如何将 audio/mp4 流编码为 base64 字符串：移动端语音输入指南

## ** 将 audio/mp4 流编码为 base64 字符串的指南：适用于移动端的语音输入

背景

在网络应用程序中捕获用户语音输入至关重要。对于桌面设备，“audio/webm” MimeType 通常足以实现此功能。然而，在移动设备上，“audio/webm” 可能不受支持。本文将介绍使用 MediaRecorder API 将 audio/mp4 流编码为 base64 字符串的方法，这将允许你在移动设备上实现语音输入功能。

步骤

1. 获取媒体流

使用 getUserMedia() 方法获取包含音频流的媒体流。

navigator?.mediaDevices?.getUserMedia({ audio: true })
    .then((stream: any) => {
        // 对流进行处理
    }

2. 创建 MediaRecorder 对象

使用媒体流和配置对象创建 MediaRecorder 对象。

const mRecorder = new MediaRecorder(stream,{
    audioBitsPerSecond: 64000,
    mimeType: 'audio/mp4'
})

3. 开始和停止录制

调用 start() 方法开始录制，调用 stop() 方法停止录制。

4. 将 Blob 转换为 base64

MediaRecorder 对象提供一个 Blob 对象，其中包含录制的数据。使用 FileReader 对象将 Blob 转换为 base64 字符串。

const blobToBase64 = async (blob:any, callback:any) => {
    const reader = new FileReader();
    reader.onload = function () {
        const base64data = String(reader?.result)?.split(",")[1];
        callback(base64data);
    };
    reader.readAsDataURL(blob);
};

代码示例

以下代码示例演示了如何使用 MediaRecorder API 将 audio/mp4 流编码为 base64 字符串：

const mimeType = 
    MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' 
    : MediaRecorder.isTypeSupported('audio/aac') ? 'audio/aac' 
    : MediaRecorder.isTypeSupported('audio/mpeg') ? 'audio/mpeg' 
    : MediaRecorder.isTypeSupported('audio/mp3') ? 'audio/mp3' 
    : MediaRecorder.isTypeSupported('audio/mp4') ? 'audio/mp4' 
    : 'audio/ogg';

navigator?.mediaDevices?.getUserMedia({ audio: true })
    .then((stream: any) => {
        initialMediaRecorder(stream)
    }

const initialMediaRecorder = async (stream: any) => {
    const mRecorder = new MediaRecorder(stream,{
        audioBitsPerSecond: 64000,
        mimeType
    })

    const chunks = { current: [] };
    mRecorder.ondataavailable = (e:any) => {
        chunks.current.push(e.data);
    }

    mRecorder.start();

    setTimeout(() => {
        mRecorder.stop();
    }, 3000);

    mRecorder.onstop = () => {
        const audioBlob = new Blob(chunks.current, { type: mimeType })
        blobToBase64(audioBlob, getText)
    }
}

const blobToBase64 = async (blob:any, callback:any) => {
    const reader = new FileReader();
    reader.onload = function () {
        const base64data = String(reader?.result)?.split(",")[1];
        callback(base64data);
    };
    reader.readAsDataURL(blob);
};

结论

通过使用 MediaRecorder API，你可以在移动设备上实现语音输入功能，即使 “audio/webm” MimeType 不受支持。本文提供了详细的步骤和代码示例，指导你完成此过程。

常见问题解答

1. 为什么需要将 audio/mp4 流编码为 base64 字符串？

   • base64 编码允许你在网络请求中传输二进制数据，这在将音频数据发送到服务器时非常有用。

2. 还有其他编码 audio/mp4 流的方法吗？

   • 是的，有其他编码方法，例如 ArrayBuffer。然而，base64 编码更易于传输和处理。

3. MediaRecorder API 兼容哪些浏览器？

   • MediaRecorder API 兼容大多数现代浏览器，包括 Chrome、Firefox 和 Safari。

4. 如何提高录制音频的质量？

   • 使用更高比特率的录音，并确保在没有背景噪音的情况下进行录制。

5. 是否有任何限制将 audio/mp4 流编码为 base64 字符串？

   • base64 编码会增加音频文件的大小，因此，对于较长的录音，建议使用分块传输的方法。