Web Audio APIがWebAudioContextを使用して再生されたオーディオを保存する機能を提供するかどうか誰かが知っていますか?
6 に答える
私は実際に、役立つかもしれないRecorderJSと呼ばれる小さなユーティリティを書きました。
少なくともChromeにはstartRendering関数があります(Safariをチェックしていません)。多少の手直しが行われているため、仕様には含まれていませんが、後の段階で追加される可能性があります(または追加されない可能性があります)。現在の実装を確認したい場合は、「Web Audio APIを使用してリアルタイムよりも高速にオーディオをサンプリングする方法はありますか?」の回答をご覧ください。
レコーディングAPIのW3C仕様http://www.w3.org/TR/mediastream-recording/がありますが、現在のところ、Firefoxでのみ実装されています。
クライアント側では、ScriptProcessorNodeハック(Record.jsのベースになっているもの)のみを使用できます。
または、一部のユースケースでは、WebRTCを使用してサーバーにオーディオをストリーミングし、Libjingleを使用してサーバー側レコーダーを作成することが理にかなっている場合があります。
このライブラリは正常に動作し、WebオーディオAPIのみ(つまりユーザーがいないことを意味します): https ://github.com/higuma/web-audio-recorder-js
しかし、今ではかなり使用できます:http: //caniuse.com/#feat=audio-api
とにかく、あなたが言ったように、あなたのサウンドはすでにオーディオコンテキストにあるので、WebオーディオAPIの最後のノードであるAudioDestinationNodeの使用方法を探していると思います。通常のhtmlオーディオプレーヤーでオーディオを再生できるようになるとすぐに、playDataUriと同様に、右クリックで録音機能を利用できるようになります。属性「controls」をプレーヤーに追加する必要があります。または、ダウンロード属性を使用して特別なリンクを作成することもできます。データをプレーヤーに送信するために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
これは最新のブラウザで利用できるようになりました。メディアレコーダーと呼ばれ、ここで詳細情報を見つけることができます
最も簡単な方法は、次のようにストリームを作成することです。
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;
}
ここで私のsoundrecアプリの例をチェックできます。マルチバンドコンプレッサーと5バンドのパラグラフもここにありますが。ああ、あなたが私のリンクをチェックしてくれたら。頭を動かすための最も重要なことは、ondataavilableメソッドです。また、blobとして保存することも、少し先のことです。誰かが私がこれをクロームで動作させるのを手伝いたいのなら、私にメールを送ってください。ありがとう。現時点ではFirefoxでのみ動作します。 マルチバンドコンプレッサー