在HTML页面中显示音频数据

Displaying audio data in HTML page

本文关键字：显示 音频 数据 HTML      更新时间：2023-09-26

所以我有下面的javascript代码，它制作了一个声音可视化器，可以在chrome上使用麦克风输入。尽管实际的可视化器工作得很好，但我想知道我是否真的可以从名为array的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);

}

你说得对！

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();

以下是用于实时音频处理的WebAPI的更多背景信息：。

相关文章：