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?

Adam Freymiller
  • 1,929
  • 7
  • 27
  • 49
  • 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 Jul 09 '15 at 05: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` https://docs.python.org/3/library/http.server.html - when accessed over http a lot of CORS limitations become more sane. – Mikko Ohtamaa Jul 09 '15 at 06:02
  • @adeneo do these things get configured inside the wsgi file of a web framework project? – Adam Freymiller Jul 13 '15 at 00:00

1 Answers1

68

Just after initializing the Audio object, add the following:

audio.crossOrigin = "anonymous";

This should prevent the CORS access restriction.

Fergal
  • 5,213
  • 6
  • 35
  • 44
  • 5
    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 Sep 11 '15 at 02:17
  • 4
    You can also set ` – AJ Richardson Nov 15 '17 at 15:39
  • Most simplast/shortest straight up valid answer! Like it, thanks! – Endless Feb 21 '21 at 19:08
  • 3
    Setting this on the ` – Lee Probert May 06 '21 at 08:22
  • Can you explain this, isn't `"anonymous"` alias `""` the default? https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin – User Rebo Oct 08 '22 at 17:19
  • @LeeProbert idk why but mine was case sensitive: crossOrigin="anonymous" worked but crossorigin did not. – patrick Jan 12 '23 at 20:49