网络音频 api 卷积器似乎没有输出零答案

【问题标题】：web audio api convolver doens't seem to output zeros网络音频 api 卷积器似乎没有输出零
【发布时间】：2015-07-22 22:17:42
【问题描述】：

我已经使用网络音频 api 将麦克风连接到卷积器、分析仪到 flot gui 以绘制频谱。为了测试，我将卷积器的缓冲区设置为统一，但我没有得到任何输出。如果我绕过卷积器并将麦克风直接连接到分析仪，它就可以工作。你能帮忙吗？

在use_convolver下面的代码中确定是否绕过卷积器。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://www.flotcharts.org/flot/jquery.flot.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Audio Spectrum</h1>
        <div id="placeholder" style="width:400px; height:200px; display: inline-block;">

        </div>
        <script>
            var microphone;
            var analyser;
            var convolver;
            //user media
            navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
            if (navigator.getUserMedia) {
                console.log('getUserMedia supported.');
                navigator.getUserMedia(
                // constraints - only audio needed for this app
                {
                    audio : true,
                    echoCancellation : true
                },
                // Success callback
                user_media_setup,
                // Error callback
                function(err) {
                    console.log('The following gUM error occured: ' + err);
                });
            } else {
                console.log('getUserMedia not supported on your browser!');
            };

            function user_media_setup(stream) {
                console.log('user media setup');
                // set up forked web audio context, for multiple browsers
                // window. is needed otherwise Safari explodes
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                //microphone
                microphone = audioCtx.createMediaStreamSource(stream);

                //analyser
                analyser = audioCtx.createAnalyser();
                analyser.fftSize = 1024;
                analyser.smoothingTimeConstant = 0.85;

                //convolver
                convolver = audioCtx.createConvolver();
                convolver.normalize = true;
                convolverBuffer = audioCtx.createBuffer(1, 1, audioCtx.sampleRate);

                //    convolverBuffer[0] = 1; //wrong

                convolverChannel = convolverBuffer.getChannelData(0);
                convolverChannel[0] = 1;
                convolver.buffer = convolverBuffer;

                //connectivity
                var use_convolver = false;
                if (use_convolver) {
                    //through convolver:
                    microphone.connect(convolver);
                    convolver.connect(analyser);
                } else {
                    //direct:
                    microphone.connect(analyser);

                }
                visualize();
            }

            function visualize() {
                console.log('visualize');
                dataArray = new Float32Array(analyser.frequencyBinCount);
                draw = function() {
                    analyser.getFloatFrequencyData(dataArray);
                    var data = [];
                    for (var i = 0; i < dataArray.length; i++) {
                        freq = audioCtx.sampleRate * i / dataArray.length / 2;
                        data.push([freq, dataArray[i]]);
                    }
                    var options = {
                        yaxis : {
                            min : -200,
                            max : 0
                        }
                    };
                    $.plot("#placeholder", [data], options);
                    window.requestAnimationFrame(draw);
                };
                window.requestAnimationFrame(draw);
            }

        </script>
    </body>
</html>

【问题讨论】：

标签： javascript html web-audio-api audiocontext

【解决方案1】：

convolverBuffer[0] 是获取缓冲区中样本数据的错误方法。您需要调用 convolverBuffer.getChannelData(0) 来获取要修改的样本数组。

【讨论】：

谢谢@aldel。我已经纠正了这个问题，但它仍然无法在 Chrome 中运行。在 Firefox 中它确实有效。我对 Firefox 的问题是，似乎有一个内置过滤器，截止频率约为 8 kHz（在我应用任何过滤或卷积之前）
@HananShteingart，嗯，当您使用 1 通道卷积器缓冲区时，Chrome 似乎不起作用。如果您使用 2 通道缓冲区，它可以工作。在我看来，这就像 Chrome 中的一个错误；你应该报告它。
使用 normalize = false 可能会更好。归一化的定义很奇怪，如果你进行归一化，你会得到比输入低得多的输出水平。

【解决方案2】：

@aldel 这个问题困扰了我好几天......非常感谢这个提示。我可以确认这也是 Firefox 中的一个问题。似乎如果您使用单声道 WAV 文件作为卷积器的缓冲区，您将不会从卷积器获得任何输出。

在我切换到立体声 WAV 脉冲响应作为缓冲区后，卷积器开始工作。

我今天学到的另外一个提示是，firefox 的网络音频工具（通过单击 Firefox 开发工具右上角的齿轮启用，并检查左侧的“网络音频”）对于可视化订单非常有用你的节点。您可以轻松地打开/关闭节点（绕过它），看看这是否会导致您的音频上下文出现问题。

【讨论】：

看来，如果 ConvolverNode 上有一个空缓冲区，它将不会输出任何音频。这在网络音频文档中并不完全清楚，并且与其他节点的行为略有不同（可以创建，默认情况下音频将通过它们）。