42

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?

3
  • 4
    You can't access the files from the filesystem like that, use a webserver and access them from the same domain, protocol and port
    – adeneo
    Commented Jul 9, 2015 at 5:15
  • 1
    Install Python and see how to spin up a local web server with Python from the current folder: python -m http.server 8000 docs.python.org/3/library/http.server.html - when accessed over http a lot of CORS limitations become more sane. Commented Jul 9, 2015 at 6:02
  • @adeneo do these things get configured inside the wsgi file of a web framework project? Commented Jul 13, 2015 at 0:00

1 Answer 1

75

Just after initializing the Audio object, add the following:

audio.crossOrigin = "anonymous";

This should prevent the CORS access restriction.

7
  • 6
    Only 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)
    – Kaiido
    Commented Sep 11, 2015 at 2:17
  • 4
    You can also set <audio crossorigin="anonymous">. Either way, you need to have access to the web server, so you can make sure it sends the Access-Control-Allow-Origin: * header. Commented Nov 15, 2017 at 15:39
  • Most simplast/shortest straight up valid answer! Like it, thanks!
    – Endless
    Commented Feb 21, 2021 at 19:08
  • 4
    Setting this on the <audio crossorigin="anonymous"> is the only thing that worked for me Commented May 6, 2021 at 8:22
  • Can you explain this, isn't "anonymous" alias "" the default? developer.mozilla.org/en-US/docs/Web/HTML/Attributes/…
    – User Rebo
    Commented Oct 8, 2022 at 17:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.