0
I was looking at this other post (Link below at the end) in the community and it caught my attention, I tried to use for Streaming but simply not even the audio wanted to play, and I remember that well in the past I tried to do something similar to this, could make a small explanation of what goes wrong when it is used in a streaming, type, of a Web Radio for example?
Get "waves" from sound or music frequency
// 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>
It does not have a simple answer, actually I am considering your questions as ample of more, in Streaming will depend on many things, usually will have to know what is the encoded format, what is the sampling rate of audio, how many bits, etc, and rememberif, you will not have the complete audio only have pieces of it being sent from time to time... Maybe if you edit the question and put your code we can better understand what’s going on.
– ederwander
I inserted my old code that at the time I was trying, but I think nowadays it doesn’t work anymore, I forgot to put, the format is mp3 128 Kbps 48000hz stereo
– João Victor
Possible duplicate of Get the frequency from a vector in the frequency domain
– Bacco