HTML 페이지에 오디오 데이터 표시

Question

그래서 마이크 입력이있는 크롬에서 작동하는 사운드 비주얼 라이저를 만드는 다음 javascript 코드가 있습니다. 실제 시각화 기능이 잘 작동하지만 실제로 uint8array에서 오디오 데이터를 가져 와서 id = "arrayIndex"라는 단락에 표시 할 수 있는지 궁금합니다. 그러나 array [i]를 표시하려고하면 항상 0으로 나오고 visualizer에서 변경되지 않습니다. 아무도 내가 어떻게 배열의 값을 캡처 할 수있는 아이디어가 있습니까? 감사!

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 그것이 작동합니다. 이렇게 높은 속도로 HTML을 업데이트하는 것은 바람직하지 않습니다 (이 경우 15kHz 이상). 이 변덕은 우스운 업데이트 속도 때문일 수 있습니다. 또한 루프에서 업데이트를 제거하면 작동합니다.

다음은 작동합니다. fiddle: 스펙트로 그램 아래의 텍스트가 올바르게 업데이트됩니다. 여기 real time audio processing:의 WebAPI에 대한 자세한 배경은

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

: 여기

는 바이올린의 코드입니다.