如何从AudioContext获取缓冲区/原始数据?

6
我正在尝试使用GetUserMedia()AudioContext API从用户麦克风记录和保存音频片段。我已经成功地使用MediaRecorder API实现了这一点,但不幸的是,Safari/iOS不支持它,因此我想仅使用来自AudioContext API和缓冲区的方法来完成它。
我通过Google Web fundamentals的这个教程部分地实现了这个过程,但我无法理解他们建议的以下步骤。
var handleSuccess = function(stream) {
    var context = new AudioContext();
    var source = context.createMediaStreamSource(stream);
    var processor = context.createScriptProcessor(1024, 1, 1);

    source.connect(processor);
    processor.connect(context.destination);

    processor.onaudioprocess = function(e) {
        // ******
        // TUTORIAL SUGGESTS: Do something with the data, i.e Convert this to WAV 
        // ******
        // I ASK: How can I get this data in a buffer and then convert it to WAV etc.??
        // *****
        console.log(e.inputBuffer);
    };
};

navigator.mediaDevices.getUserMedia({ audio: true, video: false })
    .then(handleSuccess);

正如教程所述:
缓冲区中保存的数据是来自麦克风的原始数据,您可以使用多种选项来处理这些数据:
- 直接上传到服务器 - 在本地存储 - 转换为专用文件格式(例如WAV),然后将其保存在服务器或本地
我可以做到这一点,但是我不知道如何在停止上下文后获取音频缓冲区。
使用 MediaRecorder,您可以这样做:
mediaRecorder.ondataavailable = function(e) {
    chunks.push(e.data);
}

录制完成后,你会得到一个缓冲区 chunks。根据教程所建议的,必须有一种方式实现这一点,但我无法在第一个代码示例中找到要推入缓冲区的data

一旦获取了音频缓冲区,可以将其转换为WAV格式并将其制作成Blob等。

有人可以帮我解决这个问题吗?(我不想使用MediaRecorder API)


嗨,亚当,我也遇到了同样的问题,你解决了上面的问题吗?你介意分享一下你的AudioContext API代码吗?谢谢。 - New Hand
@NewHand 对不起,我从未听说过这个解决方案,所以我不得不使用 audio-recorder-polyfill - Adam D
哦,好的,注意到了!非常感谢!! - New Hand
1
BaseAudioContext.createScriptProcessor()已被弃用。该功能已被AudioWorklets和AudioWorkletNode接口所取代。 - audiomason
1个回答

0
e.inputBuffer.getChannelData(0)

其中0是第一个通道。这应该返回一个Float32Array原始PCM数据,然后您可以将其转换为ArrayBuffer e.inputBuffer.getChannelData(0).buffer并发送到一个工作线程,以将其转换为所需的格式。

.getChannelData()文档:https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer/getChannelData

关于类型化数组:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays, https://javascript.info/arraybuffer-binary-arrays


3
虽然这个链接可能回答了问题,但最好在此处包含答案的基本部分并提供参考链接。仅有链接的答案如果链接页面发生更改可能会变得无效。 - Vimal Patel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接