MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file
21,937
Just after initializing the Audio object, add the following:
audio.crossOrigin = "anonymous";
This should prevent the CORS access restriction.
Author by
Adam Freymiller
JavaScript enthusiast, soccer aficionado, and lifelong learner.
Updated on May 11, 2020Comments
-
Adam Freymiller about 4 years
I have the following html page that I'm trying to show a class for demonstrating an audio visualizer with an mp3 stored locally:
<!doctype html> <html> <head> <header name = "Access-Control-Allow-Origin" value = "*" /> <style type = "text/css"> 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 new instance of audio var audio = new Audio(); audio.src = 'C:/Users/Adam/Desktop/1901.m4a'; audio.controls = true; audio.loop = true; audio.autoplay = true; var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height; window.addEventListener("load", initMp3Player, false); function frameLooper(){ window.webkitRequestAnimationFrame(frameLooper); fbc_array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(fbc_array); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#00CCFF"; bars = 100; for (var i = 0; i < bars; i++){ bar_x = i * 3; bar_width = 2; bar_height = -(fbc_array[i]/2); ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); } } function initMp3Player(){ document.getElementById('audio_box').appendChild(audio); context = new AudioContext(); analyser = context.createAnalyser(); canvas = document.getElementById('analyser_render'); ctx = canvas.getContext('2d'); source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); frameLooper(); } </script> </head> <body> <div id = "mp3_player"> <div id = "audio_box"></div> <canvas id = "analyser_render"></canvas> </div> </body>
I've gotten the mp3 file to play automatically before using all of the code in the script tag excluding what's below the line
audio.autoplay = true;
but when I include the frameLooper function I get the message "MediaElementAudioSource outputs zeros due to CORS access restrictions." Is there anyway to circumvent this since it's a local file?
-
Kaiido almost 9 yearsOnly if the server has the correct Access-Control-Allow-Origin setting, which is really unlikely to happen if OP keeps trying to get files from his filesystem (not a server)
-
AJ Richardson over 6 yearsYou can also set
<audio crossorigin="anonymous">
. Either way, you need to have access to the web server, so you can make sure it sends theAccess-Control-Allow-Origin: *
header. -
Endless over 3 yearsMost simplast/shortest straight up valid answer! Like it, thanks!
-
Lee Probert about 3 yearsSetting this on the
<audio crossorigin="anonymous">
is the only thing that worked for me