Get "waves" from the sound frequency or music in Streaming

Asked

Viewed 50 times

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.

  • 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

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.