是否可以在图表末尾提取原始数据？

Question

我正在探索 Web Audio api 尝试将 api 的某些方面调整到我正在开发的非 Web 框架中（这将被编译通过 Emscripten 用于网络）。

取以下代码：

  var audioCtx = new AudioContext();

    // imagine I've called getUserMedia and have the stream from a mic. 
    var source = audioCtx.createMediaStreamSource(stream);

    // make a filter to alter the input somehow
    var biquadFilter = audioCtx.createBiquadFilter();
    // imagine we've set some settings

    source.connect(biquadFilter);

假设我想获取输入流被 BiQuadFilter（或任何其他过滤器）更改后的原始数据。有什么办法吗？据我所知，看起来 AnalyserNode 可能是我正在寻找的，但理想情况下，如果可能的话，从图表的末尾拉出一个缓冲区会很棒。

如有任何提示或建议，我们将不胜感激。

Answer 1

有两种方式...

ScriptProcessorNode

您可以使用通常用于在您自己的代码中处理数据的 ScriptProcessorNode 来简单地记录原始的 32 位浮点 PCM 音频数据。

此节点是否输出任何内容由您决定。为了方便起见，我通常将输入数据复制到输出，但这样做会产生轻微的开销。

媒体记录器

MediaRecorder 可用于录制 MediaStreams，包括音频 and/or 视频。首先，您需要一个 MediaStreamAudioDestinationNode。一旦你有了它，你就可以使用 MediaRecorder 和结果流来记录它。

重要的是要注意，通常使用 MediaRecorder，您是使用有损编解码器录制压缩音频。这本质上是 MediaRecorder 的目的。但是，最近至少 Chrome 添加了对 WebM 中 PCM 的支持。实例化 MediaRecorder 时只需使用 {type: 'audio/webm;codecs=pcm'}。

（我还没有测试过这个，但我怀疑你最终会得到 16 位 PCM，而不是 Web 音频内部使用的 32 位浮点数 API。）

Answer 2

这是一个网页，只需保存它 mycode.html 然后将其文件位置提供给您的浏览器...它会提示访问您的麦克风...请注意 createMediaStreamSource 作为以及访问原始音频缓冲区然后打印到浏览器控制台日志的位置...本质上，您定义了回调函数，该函数在每个 Web Audio API 事件循环迭代时提供原始音频 - enjoy

<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 SIZE_SHOW = 3; // number of array elements to show in console output

    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;

        // not needed for basic feature set
        // 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, SIZE_SHOW, "frequency");
                show_some_data(array_time_domain, SIZE_SHOW, "time"); // store this to record to aggregate buffer/file
            }
        };
    }

}(); //  webaudio_tooling_obj = function()

</script>

</head>
<body>

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

</body>
</html>

上述方法的变体将允许您用自己的逻辑替换麦克风以再次合成音频曲线并能够访问音频缓冲区

Answer 3

另一种选择是使用 OfflineAudioContext 创建图表。您必须事先知道要捕获多少数据，但如果这样做，通常会比实时更快地获得结果。

您将获得原始 PCM 数据，以便保存或分析、进一步修改或进行其他操作。

是否可以在图表末尾提取原始数据？

Is it possible to extract raw data at the end of a graph?

javascript

audio

web-audio-api

ScriptProcessorNode

媒体记录器