javascript - Javascript Web音频rms无法读取流

我已经开发了一个网页，可以收听麦克风，计算均方根(平均响度)并更改网页上text areas的颜色。

我找到了 audio-rms package，但是该示例使用了一个振荡器，而且我不确定如何用麦克风流替换它。

然后，我在HTML5 Rocks about capturing audio上找到了一篇文章，并使用了一些代码来捕获音频以供实时使用。

我已经有一些应该从流中计算rms的代码，但是问题是麦克风从不发送任何音频。通过使用控制台日志，我发现代码可以在第8行工作，但在第11行却行不通，恰巧是在调用navigator.mediaDevices.getUserMedia时

我正在使用的代码如下，您可以在GitHub上查看文件:

+function () {
    var errorCallback = function (e) {
        console.log('Permission Rejected!', e);
    };
    var ctx = new AudioContext()

    if (navigator.mediaDevices.getUserMedia) {
        //works here
        navigator.mediaDevices.getUserMedia({audio: true}, function (stream)
        {
            //Doesn't work here.
            // 2048 sample buffer, 1 channel in, 1 channel out
            var processor = ctx.createScriptProcessor(2048, 1, 1)
            var source
            console.log("processor")
            source = ctx.createMediaElementSource(stream)
            console.log("media element")
            source.connect(processor)
            source.connect(ctx.destination)
            processor.connect(ctx.destination)
            stream.play()
            console.log("stream play")

            // loop through PCM data and calculate average
            // volume for a given 2048 sample buffer
            processor.onaudioprocess = function (evt) {
                var input = evt.inputBuffer.getChannelData(0)
                  , len = input.length
                  , total = i = 0
                  , rms
                while (i < len) total += Math.abs(input[i++])
                rms = Math.sqrt(total / len)

                console.log(rmsLevel)

                if (rmsLevel > 65) { document.getElementById("TL").style.backgroundColor = "rgb(255, 0, 0)"; }
                else if (rmsLevel > 60 && rmsLevel <= 65) { document.getElementById("L").style.backgroundColor = "rgb(255, 140, 0)"; }
                ...
            }
        }, errorCallback);
    } else {
        alert("Error. :(")
    }
}()


function resetColours() {
    document.getElementById("TL").style.backgroundColor = "rgb(110, 110, 110)";
    document.getElementById("L").style.backgroundColor = "rgb(110, 110, 110)";
    ...
}

最佳答案

您对navigator.MediaDevices.getUserMedia的使用不正确-您是使用navigator.getUserMedia回调的旧样式编写的，而不是基于基于Promise的navigator.MediaDevices.gUM的方式编写的。看看https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia。

代替

navigator.mediaDevices.getUserMedia({audio: true}, function (stream) {
    ...
}, errorcallback );

你应该说

navigator.mediaDevices.getUserMedia({audio: true}).then( function (stream) {
    ...
}).catch(function(err) {
  /* handle the error */
});

关于javascript - Javascript Web音频rms无法读取流，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46084210/