TypeScript 录制和播放原始 pcm 音频

Question

我是 TypeScript 的新手，整个 JavaScript 环境一般。我有一个小项目要做，它需要使用 TypeScript 创建一个浏览器应用程序（我还没有任何代码）。

我需要从浏览器麦克风录制原始 PCM 音频，记录下来，然后通过浏览器扬声器播放相同的 PCM 音频。

我研究过使用 MediaRecorder 进行录制，并使用纯 HTMLAudioElement 进行播放，但我不确定它们是否支持 RAW 音频。我也有一些帖子提到使用 AudioContext ScriptProcessorNode 来获取原始音频，但我不知道如何播放它们。

我不需要完整的解决方案，但如果有任何可以帮助我完成此任务的指示或教程，我将不胜感激。

Answer 1

我正在开发一个名为 extendable-media-recorder 的小库，它允许使用自定义编码器扩展本机 MediaRecorder。我构建的 proof-of-concept 编码器是 WAV 编码器。希望对你也有用。

我还没有记录这个库，这就是为什么我很乐意把你的问题作为一个机会来整理一个完整的使用示例。

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

(async () => {
    // Get the port a worker which can encode WAV files.
    const port = await connect();
    // Register this port with the MediaRecorder.
    await register(port);
    // Request a MediaStream with an audio track.
    const mediaStream = await navigator.mediaDevices
        .getUserMedia({ audio: true });
    // Create a MediaRecorder instance with the newly obtained MediaStream.
    const mediaRecorder = new MediaRecorder(mediaStream, {
        mimeType: 'audio/wav'
    });

    // Kick off the recording.
    mediaRecorder.start();

    mediaRecorder.addEventListener('dataavailable', ({ data }) => {
        // The data variable now holds a refrence to a Blob with the WAV file.
    });

    // Stop the recording after a second.
    setTimeout(() => mediaRecorder.stop(), 1000);
})();

我希望评论能解释代码的作用。如果不是这样，请告诉我。

TypeScript 录制和播放原始 pcm 音频

TypeScript record and play raw pcm audio

typescript

audiocontext

web-mediarecorder

web-audio-api