Access to audio from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to make a music player with a song visualizer. All my songs are on google drive.

For making the visualizer, I am using this code.

window.addEventListener('load', () => {
    canvas = document.getElementById("cnv1");
    context = canvas.getContext("2d");
    audioctx = new AudioContext();
    WIDTH = window.innerWidth - 50;
    canvas.width = WIDTH - 50;
    HEIGHT = 500;
    canvas.height = 500;
    analyser = audioctx.createAnalyser();
    analyser.fftSize = SAMPLES;
    oscillator = audioctx.createOscillator();
    oscillator.connect(audioctx.destination);
    source = audioctx.createMediaElementSource(music);
    source.connect(analyser);
    source.connect(audioctx.destination);
    freqArr = new Uint8Array(analyser.frequencyBinCount);
    barHeight = HEIGHT;
    window.requestAnimationFrame(draw);
});

function draw() {
    if (!music.paused) {
        bigBars = 0;
        r = 0;
        g = 0;
        b = 255;
        x = 0;
        context.clearRect(0, 0, WIDTH, HEIGHT);
        analyser.getByteFrequencyData(freqArr);
        for (var i = 0; i < INTERVAL; i++) {
            if (barHeight >= (240)) {
                bigBars++;
            }
            let num = i;
            barHeight = ((freqArr[num] - 128) * 3) + 2;
            if (barHeight <= 1) {
                barHeight = 2;
            }
            r = r + 10;
            if (r > 255) {
                r = 255;
            }
            g = g + 1;
            if (g > 255) {
                g = 255;
            }
            b = b - 2;
            if (b < 0) {
                b = 0;
            }
            context.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
            context.fillRect(x, HEIGHT - barHeight, (WIDTH / INTERVAL) - 1, barHeight);
            x = x + (WIDTH / INTERVAL);
        }
    }
    window.requestAnimationFrame(draw);
}

When I am trying to run this code, I am getting this error:

Access to audio at 'https://docs.google.com/uc?export=download&id=1Ifx_11yZ-FDdrO5XXseaDiipMBRZjpuB' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have used crossorigin="anonymous" in the audio tag, and I also have used <header name = "Access-Control-Allow-Origin" value = "*"> in the head then why I am getting this error? Please help me. I couldn't find any solution on the Internet.

I think you're confusing HTTP headers with the HTML `` tag. The server needs to be configured to allow access to the file. Seeing as the server in your example is "docs.google.com", and assuming you don't work at Google, you likely can't change the HTTP headers being returned. You'll need to host the audio files on a server that you own and control and then look into how to set [HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers) (the method for configuring them is slightly different depending on your server: e.g., Apache, nginx, etc) — stevendesu, Oct 09 '20 at 18:08
Do my knowledge, Google Drive does not allow that as it would enable people to host static websites at Google's expense (using their bandwidth, their servers, etc). Running your own server is the best cheap option, or if you want something that's simpler but comes with scaling costs you can look into block storage services like Amazon S3 (which has a free tier for testing things out) — stevendesu, Oct 11 '20 at 16:34

score 1 · Accepted Answer · answered Oct 09 '20 at 18:09

1

This is a CORS error. The error mentions that the origin requesting the resource from docs.google.com is null.

You might be running this code from a file on your local filesystem (ie. file:///....). Host it on a web server first and try again.

answered Oct 09 '20 at 18:09

dwosk

1,202
8
11

Access to audio from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answers1