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 服务器上，然后重试。