Подтвердить что ты не робот

Доступ к микрофону из браузера - Javascript

Можно ли получить доступ к микрофону (встроенному или вспомогательному) из браузера с использованием клиентского JavaScript?

В идеале он сохранит записанный звук в браузере. Спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Здесь мы записываем аудиосигнал микрофона в буфер буфера событий веб-аудио API, используя getUserMedia() - отпечатываются фрагменты временной области и частотной области каждого буфера цикла звукового события (видимые в консоли браузера просто нажимают клавишу 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>

Поскольку этот код предоставляет данные микрофона в качестве буфера, вы можете добавить возможность потока с использованием веб-сокетов или просто заполнить каждый буфер цикла событий в буфере монстра, а затем загрузить монстра в файл

Обратите внимание на вызов

    var audioContext = new AudioContext();

что указывает на его использование Web Audio API, который запекается во всех современных браузерах (в том числе мобильных браузерах), чтобы обеспечить чрезвычайно мощную аудио-платформу, в которой нажатие на микрофон является всего лишь небольшим фрагментом... ПРИМЕЧАНИЕ. Использование процессора скачет из-за этого демо-запись каждого буфера цикла событий в журнал консоли браузера, который предназначен для тестирования только так, что фактическое использование намного менее ресурсоемкое, даже если вы модифицируете это для передачи аудио в другое место

Ссылки на некоторые документы API веб-аудио