CORS 策略已阻止从来源“null”访问音频：请求的资源上不存在

Question

我正在尝试制作带有歌曲可视化工具的音乐播放器。我所有的歌曲都在谷歌驱动器上。

为了制作可视化工具，我使用了这段代码。

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;

            }

当我尝试运行此代码时，出现此错误：

CORS 策略已阻止从来源“null”访问“https://docs.google.com/uc?export=download&id=1Ifx_11yZ-FDdrO5XXseaDiipMBRZjpuB”中的音频：不存在“Access-Control-Allow-Origin”标头在请求的资源上。

我在音频标签中使用了crossorigin="anonymous"，我也在<header name = "Access-Control-Allow-Origin" value = "*"> head 中使用了那么为什么我会收到这个错误？请帮我。我在互联网上找不到任何解决方案。

Answer 1

这是一个 CORS 错误。该错误提到请求资源的来源docs.google.com是null。您可能正在从本地文件系统（即 file:///....）上的文件运行此代码。首先将其托管在 Web 服务器上，然后重试。