Question

所以我有以下javascript代码，这使得一个声音可视化器可以在带有麦克风输入的chrome上运行。虽然，实际的可视化工作效果很好，但我想知道我是否真的可以从uint8array中获取音频数据，并将其显示在id =“arrayIndex”的段落中。但是，当我尝试显示array [i]时，它总是显示为零，并且不会随可视化器而改变。有谁知道如何捕获数组中的值？谢谢！

    addEventListener('load', init);
    function init() {
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.AudioContext = window.ctx = document.getElementById('c').getContext('2d');
    gradient = ctx.createLinearGradient(0, 0, 0, 200);
    gradient.addColorStop(1, '#ADD8E6');
    gradient.addColorStop(0.65, '#576D74');
    gradient.addColorStop(0.45, '#FFAA00');
    gradient.addColorStop(0, '#FF0000');
    ctx.fillStyle = gradient;
    window.AudioContext = window.webkitAudioContext || window.AudioContext;
    context = new AudioContext();
    analyser = context.createAnalyser();
    analyser.fftsize = 512;
    analyser.smoothingTimeConstant = 0.9;
    navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    navigator.getMedia({
        audio: true,
        video: false
    }, function (localMediaStream) {
        source = context.createMediaStreamSource(localMediaStream);
        console.log(source);
        source.connect(analyser);
        draw();
    }, function (err) {
        console.log(err);
    });
}
function draw() {
    var array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(array);
    ctx.clearRect(0, 0, 512, 256);
    var barHeight;

for (var i = 0; i < array.length; i++) {
    barHeight = 256-array[i];
    ctx.fillRect(i * 2, barHeight, 1, 256);
    document.getElementById("arrayIndex").innerHTML = barHeight;
}



requestAnimationFrame(draw);

}

Answer 1

你是对的！

Chrome和Firefox都有一些怪癖。如果您将频率索引修改为例如50它的工作原理。以如此高的速率（即在这种情况下超过15kHz）更新html是一个坏主意。这个怪癖可能是由于荒谬的更新率。此外，如果您将更新从循环中取出，它将起作用。

这是一个工作 fiddle:请注意光谱图下方的文字正确更新。

以下是小提琴的代码：

var canvasCtx = document.getElementById('canvas').getContext('2d');
var bufferSize = 4096;
var audioContext;

try {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();
} catch (e) {
    alert('Web Audio API is not supported in this browser');
}

// Check if there is microphone input.
try {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    var hasMicrophoneInput = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
} catch (e) {
    alert("getUserMedia() is not supported in your browser");
}

// Create analyser node.
var analyser = audioContext.createAnalyser();

analyser.fftsize = 512;
analyser.smoothingTimeConstant = 0.9;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);

var errorCallback = function (e) {
    alert("Error in getUserMedia: " + e);
};

// Get access to the microphone and start pumping data through the  graph.
navigator.getUserMedia({
    audio: true
}, function (stream) {
    // microphone -&gt; myPCMProcessingNode -&gt; destination.
    var microphone = audioContext.createMediaStreamSource(stream);
    microphone.connect(analyser);
    analyser.connect(audioContext.destination);
    //microphone.start(0);
}, errorCallback);

// draw an oscilloscope of the current audio source

function draw() {

    drawVisual = requestAnimationFrame(draw);

    analyser.getByteFrequencyData(dataArray);

    canvasCtx.fillStyle = 'rgb(200, 200, 200)';
    var WIDTH = 500;
    var HEIGHT = 256;
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

    for (var i = 0; i < dataArray.length; i++) {
      barHeight = HEIGHT - dataArray[i];
      canvasCtx.fillRect(i * 2, barHeight, 1, dataArray[i]);
      // It is a bad idea to update an element in this loop:
      // However, if you do, the following line always gives 0, which seems like a bug.
      document.getElementById("arrayIndex").innerHTML = dataArray[i];
      // This line works though.
      document.getElementById("arrayIndex").innerHTML = dataArray[50];
    }
};

draw();

以下是real time audio processing:的WebAPI的更多背景信息。

在HTML页面中显示音频数据

1 个答案: