JavaScriptを使用してオーディオをキャプチャするには？

Question

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

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

私は現在、このようなルックスを使用していますgetUserMedia()：getUserMediaは強力なfeatureあるので、

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

Answer 1

Chromeは、HTTPSを使用して必要がありません。非セキュアなドメインではAPIアクセスが機能しないはずです。そのAPIアクセスが非セキュアなアクターに引き継がれる可能性があるからです。 FirefoxはまだgetUserMediaをhttp以上にサポートしています。

私はRecorderJSを使用していて、私の目的を十分に果たしました。 コード例を示します。 （source）

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をチェックすることもできます。

Answer 2

getUserMedia()は推奨されていませんが、廃止予定のものはhttpを使用しています。どのくらい私が唯一のブラウザを知っているかhttpsgetUserMedia()のために私は正しいアプローチだと思うものです。

あなたのテストにssl/tlsが必要な場合は、CloudFlareの無料版を使用できます。

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

Good article about getUserMedia

Fully working example with use of MediaRecorder

Answer 3

レコーダーJSはあなたのための簡単な仕事をしていません。これはWeb Audio APIノードで動作します

ChromeとFirefoxブラウザが進化しました。あなたのためにオーディオを録音する内蔵のMediaRecoder APIがあります。 47

Firefoxのサポート：

クロームのサポートからdemo

MediaRecoder支援開始の作業

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)); 

25.0