Accès au microphone à partir d'un navigateur-Javascript

est-il possible d'accéder au microphone (intégré ou auxiliaire) à partir d'un navigateur en utilisant JavaScript côté client?

idéalement, il stockerait l'enregistrement audio dans le navigateur. Merci!

23
demandé sur Scott Stensland 2015-01-08 20:47:42

2 réponses

ici, nous capturons l'audio du microphone comme un tampon en utilisant getUserMedia () - des extraits de domaine de temps et de domaine de fréquence de chaque tampon de boucle d'événement audio est imprimé (visualisable dans la console du navigateur vient de frapper la touche F12 ou 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) {

        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>

puisque ce code expose les données du microphone comme un tampon, vous pouvez ajouter la capacité de streamer en utilisant des websockets ou simplement agréger dans un fichier pour télécharger

notez l'appel à

    var audioContext = new AudioContext();

qui indique qu'il utilise le API Web Audio qui est cuit dans tous les navigateurs modernes (y compris les navigateurs mobiles) pour fournir une plateforme audio extrêmement puissante dont puiser dans le micro n'est qu'un petit fragment

quelques Liens de Web Audio API documentation

30
répondu Scott Stensland 2018-10-05 15:30:37

Oui, vous pouvez.

getUserMedia() API, vous pouvez capturer l'entrée audio brute à partir de votre microphone.

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

7
répondu user2879041 2015-06-25 18:12:17