【问题标题】:How do I get buffers/raw data from AudioContext?如何从 AudioContext 获取缓冲区/原始数据?
【发布时间】:2019-05-04 12:34:15
【问题描述】:

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

我已经能够使用MediaRecorder API 执行此操作,但不幸的是,Safari/iOS 不支持此操作,因此我想仅使用AudioContext API 和来自该 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)

【问题讨论】:

  • 嗨亚当,我也遇到了同样的问题,你解决了上面的问题吗?您介意分享您的 AudioContext API 代码吗?谢谢。
  • @NewHand 很抱歉我从未听说过解决方案,我不得不使用audio-recorder-polyfill
  • 哦,注意了!非常感谢!
  • BaseAudioContext.createScriptProcessor() 已弃用。此功能已被 AudioWorklets 和 AudioWorkletNode 接口取代。

标签: javascript web html5-audio audiocontext


【解决方案1】:
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_arrays、https://javascript.info/arraybuffer-binary-arrays。

【讨论】:

  • 虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能会失效。
猜你喜欢
  • 1970-01-01
  • 2013-02-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多