使用 HTML5 Web Audio Api 进行音频录制答案

【问题标题】：Audio recording with HTML5 Web Audio Api使用 HTML5 Web Audio Api 进行音频录制
【发布时间】：2012-10-22 01:15:10
【问题描述】：

有谁知道 Web Audio API 是否提供了保存使用 WebAudioContext 播放的音频的功能？

【问题讨论】：

标签： web-audio-api

【解决方案1】：

我实际上编写了一个名为 RecorderJS 的小实用程序，它可能会有所帮助。

【讨论】：

@MattDiamond 可以更改采样率

【解决方案2】：

至少在 Chrome 中有一个 startRendering 功能（还没有检查过 Safari）。我认为它正在进行一些返工，因此未包含在规范中，但可能会在稍后阶段添加（或不添加）。如果您想查看当前的实现，请查看Is there a way to use the Web Audio API to sample audio faster than real-time?的答案

【讨论】：

【解决方案3】：

有一个录制 API http://www.w3.org/TR/mediastream-recording/ 的 W3C 规范，但目前它只在 Firefox 中实现。

客户端只有 ScriptProcessorNode hack（这是 Record.js 的基础）。

或者，对于某些用例，使用 WebRTC 将音频流式传输到服务器并使用 Libjingle 编写服务器端记录器可能是有意义的。

【讨论】：

【解决方案4】：

这个库工作正常，只有网络音频 api（意味着没有用户）： https://github.com/higuma/web-audio-recorder-js

但我们现在可以公平地使用它： http://caniuse.com/#feat=audio-api

无论如何，就像您说的那样，您的声音已经在音频上下文中，所以我认为您正在寻找如何使用 AudioDestinationNode，即网络音频 api 的最终节点。只要您可以通过普通的 html 音频播放器播放音频，您就会在右键单击时获得录音功能，就像 playDataUri 一样。您需要为播放器添加“控件”属性，或者您可以制作带有下载属性的特殊链接。我对 Mdn 脚本做了一个小改进，将数据发送给玩家，它应该给你一个好主意：



    var audioCtx = new AudioContext();
    var source = audioCtx.createMediaElementSource(myMediaElement);
        myMediaElement = document.createElement("audio");
        myMediaElement.setAttribute("autoplay", true);
        myMediaElement.setAttribute("src", uri);
        myMediaElement.setAttribute("controls", "controls");
        document.getElementById('player').appendChild(myMediaElement);
    source.connect(audioCtx.destination);

AudioDestinationNode 接口表示最终目的地给定上下文中的音频图 - 通常是您的扬声器设备。它也可以是“记录”音频数据的节点与 OfflineAudioContext 一起使用。

https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode

【讨论】：

【解决方案5】：

这个现在可以在最新的浏览器中使用，它叫做media recorder你可以找到更多information here

【讨论】：

【解决方案6】：

最简单的方法是创建一个流

 var dest = audioCtx.createMediaStreamDestination();
 var options = {
 audioBitsPerSecond : 320000,
 sampleSize: 16,
 channelCount: 2,
 mimeType : 'audio/ogg'
     }
  var mediaRecorder = new       MediaRecorder(dest.stream, options);
  var chunks = [];
var isrecording = "Not Recording";

function rec(){


mediaRecorder.start();// start record
dataavailable = true;
isrecording = mediaRecorder.state;
}

您可以查看我的录音示例应用在这里。虽然它也是一个完整的多段压缩器和 5 段段落。哦，如果你查看我的链接。最重要的事情是 ondataavailable 方法。保存为 blob 也有点超前。 Ps 如果有人想帮助我在 chrome 上进行此工作，请给我发一封电子邮件。谢谢。它目前仅适用于 Firefox。 MultiBand Compressor

【讨论】：