web-dev-qa-db-ja.com

ブラウザからマイクにアクセス-Javascript

クライアント側のJavaScriptを使用して、ブラウザーからマイク（内蔵または補助）にアクセスできますか？

理想的には、記録されたオーディオをブラウザに保存します。ありがとう！

javascriptaudioweb-audio-apimicrophonerecording
32
poisonlocc

ここでは、マイクオーディオをgetUserMedia（）を使用してWeb Audio APIイベントループバッファーとしてキャプチャします-各オーディオイベントループバッファーの時間ドメインと周波数ドメインのスニペットが印刷されます（ブラウザーコンソールで表示できるのは、キーF12またはctrl + shift + iを押すだけです）

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>capture microphone audio into buffer</title>

<script type="text/javascript">


  var webaudio_tooling_obj = function () {

    var audioContext = new AudioContext();

    console.log("audio is starting up ...");

    var BUFF_SIZE = 16384;

    var audioInput = null,
        microphone_stream = null,
        gain_node = null,
        script_processor_node = null,
        script_processor_fft_node = null,
        analyserNode = null;

    if (!navigator.getUserMedia)
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if (navigator.getUserMedia){

        navigator.getUserMedia({audio:true}, 
          function(stream) {
              start_microphone(stream);
          },
          function(e) {
            alert('Error capturing audio.');
          }
        );

    } else { alert('getUserMedia not supported in this browser.'); }

    // ---

    function show_some_data(given_typed_array, num_row_to_display, label) {

        var size_buffer = given_typed_array.length;
        var index = 0;
        var max_index = num_row_to_display;

        console.log("__________ " + label);

        for (; index < max_index && index < size_buffer; index += 1) {

            console.log(given_typed_array[index]);
        }
    }

    function process_microphone_buffer(event) { // invoked by event loop

        var i, N, inp, microphone_output_buffer;

        microphone_output_buffer = event.inputBuffer.getChannelData(0); // just mono - 1 channel for now

        // microphone_output_buffer  <-- this buffer contains current gulp of data size BUFF_SIZE

        show_some_data(microphone_output_buffer, 5, "from getChannelData");
    }

    function start_microphone(stream){

      gain_node = audioContext.createGain();
      gain_node.connect( audioContext.destination );

      microphone_stream = audioContext.createMediaStreamSource(stream);
      microphone_stream.connect(gain_node); 

      script_processor_node = audioContext.createScriptProcessor(BUFF_SIZE, 1, 1);
      script_processor_node.onaudioprocess = process_microphone_buffer;

      microphone_stream.connect(script_processor_node);

      // --- enable volume control for output speakers

      document.getElementById('volume').addEventListener('change', function() {

          var curr_volume = this.value;
          gain_node.gain.value = curr_volume;

          console.log("curr_volume ", curr_volume);
      });

      // --- setup FFT

      script_processor_fft_node = audioContext.createScriptProcessor(2048, 1, 1);
      script_processor_fft_node.connect(gain_node);

      analyserNode = audioContext.createAnalyser();
      analyserNode.smoothingTimeConstant = 0;
      analyserNode.fftSize = 2048;

      microphone_stream.connect(analyserNode);

      analyserNode.connect(script_processor_fft_node);

      script_processor_fft_node.onaudioprocess = function() {

        // get the average for the first channel
        var array = new Uint8Array(analyserNode.frequencyBinCount);
        analyserNode.getByteFrequencyData(array);

        // draw the spectrogram
        if (microphone_stream.playbackState == microphone_stream.PLAYING_STATE) {

            show_some_data(array, 5, "from fft");
        }
      };
    }

  }(); //  webaudio_tooling_obj = function()



</script>

</head>
<body>

    <p>Volume</p>
    <input id="volume" type="range" min="0" max="1" step="0.1" value="0.5"/>

</body>
</html>

このコードはマイクデータをバッファーとして公開するため、websocketsを使用してストリーミングする機能を追加するか、単に各イベントループバッファーをモンスターバッファーに集約してから、モンスターをファイルにダウンロードできます。

への呼び出しに注意してください

    var audioContext = new AudioContext();

Web Audio API を使用することを示します。これは、すべての最新のブラウザー（モバイルブラウザーを含む）に組み込まれ、マイクへのタップがほんの小さな断片である非常に強力なオーディオプラットフォームを提供します...[〜＃〜] note [〜＃〜]各デモを書いているため、CPU使用率が跳ね上がりますイベントループバッファをブラウザコンソールログに保存します。これはテストのみを目的としているため、これを変更してオーディオを他の場所にストリーミングする場合でも、リソースの使用量ははるかに少なくなります。

一部のWeb Audio APIドキュメントへのリンク

44
Scott Stensland

はい、できます。

getUserMedia()APIを使用すると、マイクから生のオーディオ入力をキャプチャできます。

https://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

6
user2879041