0

Eu estava olhando este outro post (Link abaixo no final) na comunidade e me chamou a atenção, tentei utilizar para Streaming mas simplesmente nem o áudio quis tocar, e me recordo que bem antigamente tentei fazer algo similar a isso, poderiam fazer uma pequena explicação do que dá de errado quando se usa em um streaming, tipo, de um Web Rádio por exemplo?

Obter "ondas" da frequência de som ou música

	// 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>

3
  • Não tem uma resposta simples, na verdade estou considerando sua perguntas como ampla de mais, em Streaming vai depender de muitas coisas, geralmente terá que saber qual é o formato codificado, qual é a taxa de amostragem do áudio, quantos bits, etc, e lembre-se, você não terá o áudio completo só terá pedaços dele sendo enviado de tempos em tempos... Talvez se editar a pergunta e colocar o seu código podemos entender melhor o que está acontecendo.
    – ederwander
    6/08/2018 às 10:57
  • eu inseri o meu código antigo que na época estava tentando, mas acho que hoje em dia não funciona mais, esqueci de colocar, o formato é mp3 128 Kbps 48000hz stereo
    – user94502
    6/08/2018 às 14:43
  • Possível duplicata de Obter a frequencia a partir de um vetor no dominio da frequencia
    – Largato
    6/08/2018 às 14:45

0

Você deve fazer log-in para responder a esta pergunta.