web-dev-qa-db-ja.com

javascriptでオーディオをキャプチャする方法は？

現在getUserMedia()を使用しています。これはFirefoxとChromeでのみ動作しますが、廃止され、https（Chrome）でのみ動作します。すべてのプラットフォームで動作するjavascriptで音声入力を取得する他の/より良い方法はありますか？

例えば。 web.whatsapp.comアプリのようなウェブサイトはどのように音声を録音しますか？ getUserMedia()は、初めてのユーザーに音声録音を許可するように要求しますが、Wh​​atsappアプリケーションはユーザーの許可を必要としません。

現在使用しているgetUserMedia()は次のようになります。

navigator.getUserMedia(
    {
        "audio": {
            "mandatory": {
                "googEchoCancellation": "false",
                "googAutoGainControl": "false",
                "googNoiseSuppression": "false",
                "googHighpassFilter": "false"
            },
            "optional": []
        },
    }, gotStream, function(e) {
        console.log(e);
    });
javascriptaudiospeechgetusermediavoice-recording
20
user2212461

Chrome 60+は httpsを使用する必要があります 、なぜならgetUserMediaは強力な 機能 =。 APIアクセスは、非セキュアドメインでは機能しません。そのAPIアクセスは、非セキュアアクターにブリードオーバーされる可能性があるためです。ただし、FirefoxはgetUserMedia overhttpを引き続きサポートしています。

RecorderJS を使用してきましたが、それは私の目的を十分に果たしました。以下にコード例を示します。 （ ソース ）

function RecordAudio(stream, cfg) {

  var config = cfg || {};
  var bufferLen = config.bufferLen || 4096;
  var numChannels = config.numChannels || 2;
  this.context = stream.context;
  var recordBuffers = [];
  var recording = false;
  this.node = (this.context.createScriptProcessor ||
    this.context.createJavaScriptNode).call(this.context,
    bufferLen, numChannels, numChannels);

  stream.connect(this.node);
  this.node.connect(this.context.destination);

  this.node.onaudioprocess = function(e) {
    if (!recording) return;
    for (var i = 0; i < numChannels; i++) {
      if (!recordBuffers[i]) recordBuffers[i] = [];
      recordBuffers[i].Push.apply(recordBuffers[i], e.inputBuffer.getChannelData(i));
    }
  }

  this.getData = function() {
    var tmp = recordBuffers;
    recordBuffers = [];
    return tmp; // returns an array of array containing data from various channels
  };

  this.start() = function() {
    recording = true;
  };

  this.stop() = function() {
    recording = false;
  };
}

使い方は簡単です：

var recorder = new RecordAudio(userMedia);
recorder.start();
recorder.stop();
var recordedData = recorder.getData()

編集：これも確認することをお勧めします answer 何も機能しない場合。

28
George Netu

Recorder JSはあなたのために簡単な仕事をします。 Web Audio APIノードで動作します

ChromeおよびFirefoxブラウザーは現在進化しています。音声録音を行う組み込みのMediaRecoder AP​​Iがあります。

navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream => {
        rec = new MediaRecorder(stream);
        rec.ondataavailable = e => {
            audioChunks.Push(e.data);
            if (rec.state == "inactive"){
               // Use blob to create a new Object URL and playback/download
            }
        }
    })
    .catch(e=>console.log(e));

作業中 デモ

MediaRecoderサポートは以下から始まります

Chromeサポート：47

Firefoxサポート：25.0

17
Sasi Varunan

getUserMedia()は非推奨ではなく、httpで使用されています。 getUserMedia()のhttpsを必要とする唯一のブラウザは、今のところChrome正しいアプローチだと思うものです。

お望みならば ssl/tlsテストには、CloudFlareの無料バージョンを使用できます。

Whatsappページには記録機能はありません。アプリケーションを起動するだけです。

getUserMedia に関する良い記事

_MediaRecorder を使用した完全に機能する例

2
LJ Wadowski