HTML 录音直到静音？答案

【问题标题】：HTML Audio recording until silence?HTML 录音直到静音？
【发布时间】：2014-08-22 08:24:56
【问题描述】：

我正在寻找一种基于浏览器的录音方式，直到出现静音。

在 Firefox 和 Chrome 中可以从麦克风录制 HTML 音频 - 使用 Recordmp3js 见： http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/ 以及github上的代码：http://github.com/nusofthq/Recordmp3js

在静音之前我看不到更改该代码以记录的方法。

录制，直到可以使用 Java 为原生 Android 应用程序完成（和调整）静音 - 请参见此处： Android audio capture silence detection

Google Voice Search 演示了浏览器可以做到这一点 - 但我如何使用 Javascript？有什么想法吗？

【问题讨论】：

我相信你可以从音高检测中使用的代码中弄清楚：github.com/cwilso/pitchdetect
您想要真正的数字静音，还是低于阈值的声级？
一个简单的门槛就可以了。
录制完成后，我知道如何通过音频缓冲区和阈值来获取音频间隙 - 在录制过程中，我不知道如何访问音频流并抛出一个停止录制事件。

标签： javascript html audio capture microphone

【解决方案1】：

如果您使用 Web 音频 API，请通过调用 navigator.getUserMedia 来打开实时麦克风音频捕获，然后使用 createScriptProcessor 创建一个节点，然后为该节点分配其事件的回调：onaudioprocess。在您的回调函数中（下面我使用 script_processor_analysis_node），您可以访问实时音频缓冲区，然后您可以解析该缓冲区以寻找静音（幅度较低的一段时间[保持接近零]）。

正常时域音频曲线见：array_time_domain 每次调用回调 script_processor_analysis_node 时都会重新填充...对于频域，请参见 array_freq_domain

调低扬声器音量或使用耳机以避免来自麦克风 -> 扬声器 -> 麦克风的反馈...

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>capture microphone then show time & frequency domain output</title>

<script type="text/javascript">

var webaudio_tooling_obj = function () {

    var audioContext = new AudioContext();

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

    var BUFF_SIZE_RENDERER = 16384;

    var audioInput = null,
    microphone_stream = null,
    gain_node = null,
    script_processor_node = null,
    script_processor_analysis_node = null,
    analyser_node = 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;

        console.log("__________ " + label);

        if (label === "time") {

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

                var curr_value_time = (given_typed_array[index] / 128) - 1.0;

                console.log(curr_value_time);
            }

        } else if (label === "frequency") {

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

                console.log(given_typed_array[index]);
            }

        } else {

            throw new Error("ERROR - must pass time or frequency");
        }
    }

    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
    }

    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_RENDERER, 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_analysis_node = audioContext.createScriptProcessor(2048, 1, 1);
        script_processor_analysis_node.connect(gain_node);

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

        microphone_stream.connect(analyser_node);

        analyser_node.connect(script_processor_analysis_node);

        var buffer_length = analyser_node.frequencyBinCount;

        var array_freq_domain = new Uint8Array(buffer_length);
        var array_time_domain = new Uint8Array(buffer_length);

        console.log("buffer_length " + buffer_length);

        script_processor_analysis_node.onaudioprocess = function() {

            // get the average for the first channel
            analyser_node.getByteFrequencyData(array_freq_domain);
            analyser_node.getByteTimeDomainData(array_time_domain);

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

                show_some_data(array_freq_domain, 5, "frequency");
                show_some_data(array_time_domain, 5, "time"); // store this to record to aggregate buffer/file

// examine array_time_domain for near zero values over some time period

            }
        };
    }

}(); //  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>

【讨论】：

听起来很有希望，我会看看 - 并尽快回来
嘿 Scott 和@GavinBrelstaff 静默时如何告诉我。我想实现类似的东西，想在静音且用户完成语音输入时触发功能

【解决方案2】：

这是一个旧帖子，但我相信很多人都会遇到同样的问题，所以我在这里发布我的解决方案。使用hark.js

以下是我用于电子应用程序的示例演示代码

  hark = require('./node_modules/hark/hark.bundle.js')

  navigator.getUserMedia({ audio : true}, onMediaSuccess, function(){});

  function onMediaSuccess(blog) {

    var options = {};
    var speechEvents = hark(blog, options);

    speechEvents.on('speaking', function() {
      console.log('speaking');
    });

    speechEvents.on('stopped_speaking', function() {
      console.log('stopped_speaking');
    });
  };

【讨论】：

【解决方案3】：

@Scott Stensland 的解决方案不允许我解析静音。我在解析两个数组时得到相同的值 - 也就是说，在解析 arrayFreqDomain 和 128 时总是在解析 arrayTimeDomain 时得到 0

let analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0;
analyser.fftSize = 2048;
let buffLength = analyser.frequencyBinCount;
let arrayFreqDomain = new Uint8Array(buffLength);
let arrayTimeDomain = new Uint8Array(buffLength);
processor.connect(analyser);

processor.onaudioprocess = (event) => {
   /**
   *
   * Parse live real-time buffer looking for silence
   *
   **/
   analyser.getByteFrequencyData(arrayFreqDomain);
   analyser.getByteTimeDomainData(arrayTimeDomain);

   if (context.state === "running") {
        let sizeBuffer = arrayTimeDomain.length;
        let index = 0;
        for (; index < 5 && index < sizeBuffer; index += 1) {

            console.log(arrayTimeDomain[index]); <----
        }
   }
}

【讨论】：