Search code examples
javascripthtmlaudiohtml5-canvasaudiocontext

Analyser Bars Animation HTML Audio API not working

i used a js code of audio api for visualizing my html5 audio and it worked great here is the tutorial/code

link: https://www.developphp.com/video/Jav...o-API-Tutorial

and it works soo good but the problem when i change the src with external link like:

src= "http://example.com/file.mp3"

the audio dont make sound and the visualization dont show although when i remove the visualization code it work normally... i tried changing

context.createMediaElementSource(audio);

with

AudioContext.createMediaStreamDestination()

the audio played but no visualization still.. i don't know what i can do any idea?

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<style>
div#mp3_player{ width:500px; height:60px; background:#000; padding:5px; margin:50px auto; }
div#mp3_player > div > audio{  width:500px; background:#000; float:left;  }
div#mp3_player > canvas{ width:500px; height:30px; background:#002D3C; float:left; }
</style>
<script>
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
// audio.crossOrigin='anonymous';
audio.src = 'http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
	document.getElementById('audio_box').appendChild(audio);
	context = new AudioContext(); // AudioContext object instance
	analyser = context.createAnalyser(); // AnalyserNode method
	canvas = document.getElementById('analyser_render');
	ctx = canvas.getContext('2d');
	// Re-route audio playback into the processing graph of the AudioContext
	
	source = context.createMediaStreamDestination(audio);	
	
	source.connect(analyser);
	analyser.connect(context.destination);
	frameLooper();

// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
	window.requestAnimationFrame(frameLooper);
	fbc_array = new Uint8Array(analyser.frequencyBinCount);
	analyser.getByteFrequencyData(fbc_array);
	ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
	ctx.fillStyle = '#00CCFF'; // Color of the bars
	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 ) // Explanation of the parameters below
		ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
	}
}
}

</script>
</head>
<body>
<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analyser_render"></canvas>
</div>
</body>
</html>

Solution

  • The problem probably lies in the analyzer node. It can only process media that were loaded in compliance with CORS.

    If the server serving your media is well configured, you may try to set the crossOrigin attribute of the audio element, otherwise, you'll have to serve the file from your own domain.