Analyser Bars Animation HTML Audio API not working
Question
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>
1 answers
solution1
0 ACCPTED 2016-09-30 09:25:53
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.