只要来自麦克风的信号超过设定的阈值,以下代码就会将一个框变为红色。它一整天都在linux上使用chrome和在windows上运行chrome。它在两个平台上的firefox上运行良好 - 大约15秒。当它停止在firefox上工作时它没有错误,.getChannelData只是开始返回全零。我是否在FF中发现了一个错误,或者只是做了更好的工作来清理我的shonky javascipt?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
#wrapper { width:100px; height: 100px; background-color: #00F; }
</style>
</head>
<body>
<div id="wrapper">
</div>
<div id="outs">
Audio blocks processed: <span id="audProcEnv">none</span><br>
</div>
<script>
const MINFRAMETIME = 100;
const SCRIPTPROCESSORBUFFER = 1024;
const TRIGGERTHRESHOLD = 0.1;
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var audioContext = new (window.AudioContext || window.webkitAudioContext)();
var gainNode = audioContext.createGain();
gainNode.gain.value = 0; // Mute the output / Don't output sound - feedback!
var scriptNode = audioContext.createScriptProcessor(SCRIPTPROCESSORBUFFER, 2, 2);
var vu = document.querySelector('#wrapper');
var audioProcessingEventDiv = document.querySelector('#audProcEnv');
var audioProcessingEventCounter = 0;
var lastRedraw = 0;
var signal = false;
var drawStuff;
navigator.getUserMedia (
{ audio: true },
function(stream) {
var source = audioContext.createMediaStreamSource(stream);
source.connect(scriptNode);
scriptNode.connect(gainNode);
gainNode.connect(audioContext.destination);
draw();
},
function(err) {
console.log('Error:' + err);
}
);
scriptNode.onaudioprocess = function(audioProcessingEvent) {
dispPeak = 0;
signal = false;
audioProcessingEventCounter++;
var left = audioProcessingEvent.inputBuffer.getChannelData (0);
var leftout = audioProcessingEvent.outputBuffer.getChannelData (0);
for (var sample = 0; sample < SCRIPTPROCESSORBUFFER; sample++) {
leftout[sample] = left[sample];
if (left[sample] > dispPeak) { dispPeak = left[sample]; }
if (left[sample] < -dispPeak) { dispPeak = -left[sample]; }
if (dispPeak > TRIGGERTHRESHOLD) { signal = true; }
}
};
function draw() {
drawStuff = requestAnimationFrame(draw);
if (Date.now() > (lastRedraw + MINFRAMETIME)) {
if (signal) {
vu.style.backgroundColor = "#F00";
} else {
vu.style.backgroundColor = "#00F";
}
audioProcessingEventDiv.innerHTML = audioProcessingEventCounter;
lastRedraw = Date.now();
}
}
draw();
</script>
</body>
</html>