1

Necesito su ayuda para mostrar en pantalla y en tiempo real los datos numéricos del arreglo freqByteData[i]

Este es el código en JavaScript, permite graficar la frecuencia

var analyser, canvas, ctx;
window.onload = function() {
    canvas = document.createElement('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);
    ctx = canvas.getContext('2d');

    setupWebAudio();
    draw();

};

function setupWebAudio() {
    var audio = document.createElement('audio');
    audio.src = 'musicx.mp3';
    audio.controls = 'true';
    document.body.appendChild(audio);
    audio.style.width = window.innerWidth + 'px';

    var audioContext = new AudioContext();
    analyser = audioContext.createAnalyser();
    analyser.minDecibels = -60;
    analyser.maxDecibels = -10;  
    analyser.fftSize = 32;
    var source = audioContext.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioContext.destination);
    audio.play();
}

function draw() {
    requestAnimationFrame(draw);
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 1; i < freqByteData.length; i += 1){

        ctx.fillRect(i, canvas.height - freqByteData[i], 200, canvas.height);

    }
}

Y el código HTML

<!doctype html>
<html lang="en">
    <head>
        <title>Web Audio API Visualisation</title>
        <meta charset="utf-8">
        <script src="script.js"></script>
    </head>
</html>

1 respuesta 1

1

Bueno, creo que ya lo resolví googlenado bastante, les dejo la solución, sobra un poco de código, peor mejor ni le muevo XD

  var analyser, canvas, ctx;
window.onload = function() {
canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
setupWebAudio();
draw();
  };

 function setupWebAudio() {
   var audio = document.createElement('audio');
audio.src = 'musicx.mp3';
audio.controls = 'true';
document.body.appendChild(audio);
audio.style.width = window.innerWidth + 'px';

var audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
analyser.minDecibels = -60;
analyser.maxDecibels = -10;  
analyser.fftSize = 32;
var source = audioContext.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(audioContext.destination);
audio.play();
 }
 function draw() {
requestAnimationFrame(draw);
var freqByteData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(freqByteData);
ctx.clearRect(0, 0, canvas.width, canvas.height);
 //  for (var i = 1; i < freqByteData.length; i += 1){

//   ctx.fillRect(i, canvas.height - freqByteData[i], 200, canvas.height);
 ////// MODIFICACION SIGNIFICATIVA USANDO TIMER////
 var i = 1;
if (i > freqByteData.length) return;
setTimeout(function () { 
document.getElementById("demo").innerHTML = freqByteData[i];
}, 100);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.