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

时间:2018-12-03 08:29:15

标签: javascript web html5-audio audiocontext

我正在尝试使用GetUserMedia()AudioContext API从用户麦克风录制和保存声音片段。

我已经可以使用MediaRecorder API来执行此操作,但是很遗憾,Safari / iOS不支持该功能,因此我只想使用AudioContext API和该缓冲区即可来自那个。

我使用this tutorial from 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可以推入缓冲区。

一旦获得音频缓冲区,我就可以convert it to WAV并将其放入blob等。

有人可以帮我吗? (我不想使用MediaRecorder API)

1 个答案:

答案 0 :(得分:0)

e.inputBuffer.getChannelData(0)

其中 0 是第一个通道。这应该返回一个带有原始 PCM 数据的 Float32Array,然后您可以将其转换为 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_arrayshttps://javascript.info/arraybuffer-binary-arrays