Question

我开发了一个监听麦克风的网页，计算根平均值（平均响度）并更改网页上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)";
    ...
}

Answer 1

你对navigator.MediaDevices.getUserMedia的使用不正确 - 你是用旧式的navigator.getUserMedia回调编写的，而不是以navigator.MediaDevices.gUM的基于Promise的方式编写的。看看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网络音频无法读取流

1 个答案: