WebAudio Api JAVA SCRIPT

Question

WebAudio Api JAVA SCRIPT

Navigation

#1 by (1 votes)

1

I need your help to display on the screen and in real time the numeric data of the array freqByteData[i]

This is the code in JavaScript, it allows to graph the frequency

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

    }
}

And the HTML code

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

javascript

asked by JESUS ESPINOSA 24.12.2017 в 19:16

source

1 answer

Android studio create folders in res angular post method remove character +

score 1 · Accepted Answer

Well, I think I've solved it a lot, googled it a lot, I'll give you the solution, I'll have a bit of code, I'd better move it 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);
}