从浏览器访问麦克风 - Javascript答案

【问题标题】：Access microphone from a browser - Javascript从浏览器访问麦克风 - Javascript
【发布时间】：2015-03-06 22:30:07
【问题描述】：

是否可以使用客户端 JavaScript 从浏览器访问麦克风（内置或辅助）？

理想情况下，它会将录制的音频存储在浏览器中。谢谢！

【问题讨论】：

@poisonlocc 看看这个：html5rocks.com/en/tutorials/getusermedia/intro

标签： javascript audio web-audio-api microphone recording

【解决方案1】：

在这里，我们使用 getUserMedia() 将麦克风音频捕获为 Web 音频 API 事件循环缓冲区...打印每个音频事件循环缓冲区的时域和频域 sn-ps（可在浏览器控制台中查看，只需按 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>

由于此代码将麦克风数据公开为缓冲区，您可以添加使用 websocket 进行流式传输的功能，或者简单地将每个事件循环缓冲区聚合到一个怪物缓冲区中，然后将怪物下载到一个文件中

注意调用

    var audioContext = new AudioContext();

这表明它使用了所有现代浏览器（包括移动浏览器）中的Web Audio API，以提供一个极其强大的音频平台，点击麦克风只是一个很小的片段...... 注意由于此演示将每个事件循环缓冲区写入浏览器控制台日志（仅用于测试），因此 CPU 使用率会上升

一些网络音频 API 文档的链接

【讨论】：

嗨@scott-stensland，这很棒。这段代码是你写的吗？是否有原始来源或回购或许可？谢谢！
@binarymax 是的，它是我的代码......随意掠夺......我在编写github.com/scottstensland/websockets-streaming-audio时自学了以上技巧，它使用websockets从服务器流式传输音频，然后在浏览器中呈现使用 Web Audio API 并在中间使用 webworker 插页式层来照看网络流量......我需要对代码进行反应 ;-) 因为它严格来说是一个学习练习
什么是学习这一切的好方法，我知道 javascritp 和 dom。我不知道音频 api 以及与之相关的所有内容，例如缓冲区大小、通道、流等
请注意，现在MDN 建议使用“较新的navigator.mediaDevices.getUserMedia()”

【解决方案2】：

是的，你可以。

使用 getUserMedia() API，您可以从麦克风捕获原始音频输入。

【讨论】：

我知道链接另一个 URL 不好，但看起来这是新的地方：ulistentome.wordpress.com/2014/10/24/…