I was looking at this other post (link below at the end) in the community and it caught my attention, I tried to use it for Streaming but simply did not even want to play the audio, and I remember that I used to do something like that, a small explanation of what goes wrong when used in a streaming, type, of a Web Radio for example?
Get "waves "of sound frequency or music
// criando objeto <audio> e configurando
var audio = new Audio();
audio.src = 'link streaming';
audio.controls = true;
audio.loop = false;
audio.autoplay = true;
// estabelecendo variaveis
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// inicializando o player depois da pagina ter carregado
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext(); // Instancia do objeto AudioContext
analyser = context.createAnalyser(); // Metodo AnalyserNode
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
// Reencaminhar a reprodução de áudio para o gráfico de processamento do AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
function frameLooper(){
window.RequestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // limpa as barras
ctx.fillStyle = '#00CCFF'; // cores das barras
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 2);
// fillRect( x, y, width, height ) // altura e largura
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
player > div > audio{ width:500px; background:#000; float:left; }
player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }<div id="player">
<div id="audio"></div>
<canvas id="analyser"></canvas>
</div>