web-dev-qa-db-ja.com

ウェブページでオーディオを録音する方法（iOS、Android、PC / Mac）-フラッシュなし

ユーザーがマイクを使用してオーディオファイルを録音できるようにする必要がありますが、iOS（モバイルサファリ）、AndroidブラウザーまたはChrome、 PC/Macの最新のブラウザ。

オーディオを録音してサーバーに投稿するための、クリーンでシンプルなHTML5メソッドはありますか？何も見つかりませんでした。

androidioshtml5audio-recordingmicrophone
24
Jim Jones

HTML5 WebAudio API を使用できます。

オーディオとビデオのキャプチャの概要 HTML5でオーディオとビデオをキャプチャする

サンプルでオーディオを録音するための優れたライブラリ Recorder.js

Recorder.jsを使用した完全で実用的なサンプル ChromeネイティブHTML5 APIでオーディオを録音する方法

その他のWebAudio APIデモ HTML5 Web Audio APIデモとライブラリ

サポートされているブラウザ Web Audio APIを使用できますか？

Recorder.jsを使用して他のサーバーにデータを送信する場合、オーディオバッファーを取得できます。その後、XMLHttpRequestを使用して、POST配列バッファーまたはblobを宛先サーバーに直接またはbase64としてエンコードできます。

MDN： バイナリデータの送受信

Html5Rocks： XMLHttpRequest2の新しいトリック、データの送信

36
vzamanillo

専門的に言えば、いいえ、HTML5にはオーディオAPIがありますが、その実装は現時点ではブラウザーによって異なります。ある種の技術デモ用にこれを行う場合はそれで十分かもしれませんが、そうでない場合は、より信頼性の高い結果を得るために、フラッシュやネイティブアプリなどの他の技術にフォールバックする必要があるかもしれません。

3
Roy

getUserMedia()がモバイル全体で広くサポートされるようになりました。

およびデスクトップ：

  • Safari 11
  • Chrome
  • Firefox
  • エッジ12
  • Opera

ウェブカメラ/マイクの許可が与えられ、マイクデータが有効になったら：

  • Recorder.js （wav）、 WebAudioRecorder.js （wav、mp3、Vorbis）、または vmsg （mp3）などのJSライブラリを使用してサウンドをエンコードします。
  • または、（ネイティブ） Media Recorder API を使用して、.ogg（Firefox）および.webm（Chrome）ファイルのOpusオーディオをこれと一緒にキャプチャします neat polyfill Safari 11およびEdge .wavファイルを生成します。

ここでは、Matt Diamondの Recorder.js を使用してオーディオ（.wavファイルのpcm）を記録するデモ（ live demo 、 source on GitHub ）を作成しました。 ）iOS 11.のSafariで実行します

Recorder.js demo running on iOS 11Clicking Record prompts the user to allow microphone access

1
Octavian Naicu