Get "waves" of frequency of sound or music in Streaming


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(){
		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); 
	function frameLooper(){
		fbc_array = new Uint8Array(analyser.frequencyBinCount);
		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>
asked by anonymous 05.08.2018 / 02:36

0 answers