由于CORS访问限制，MediaElementAudioSource输出零值，本地mp3文件。

Question

由于CORS访问限制，MediaElementAudioSource输出零值，本地mp3文件。

42

我有一个HTML页面，我想展示一个用于演示本地存储的MP3的音频可视化器类。

<!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>

我之前已经成功使用脚本标签中除以下行以外的代码，使mp3文件自动播放：

audio.autoplay = true;

但是当我包含frameLooper函数时，出现了“MediaElementAudioSource输出零，因为由于CORS访问限制。”的消息。有没有什么办法可以规避这个问题，因为这是一个本地文件？

- Adam Freymiller

4

不能像那样从文件系统访问文件，需要使用Web服务器，并从相同的域、协议和端口访问它们。 - adeneo

1

安装Python并查看如何使用Python从当前文件夹启动本地Web服务器：python -m http.server 8000 https://docs.python.org/3/library/http.server.html - 当通过http访问时，许多CORS限制变得更加合理。 - Mikko Ohtamaa

@adeneo 这些东西是在 Web 框架项目的 wsgi 文件中配置的吗？ - Adam Freymiller

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fergal · Accepted Answer

69

在初始化音频对象之后，添加以下内容：

audio.crossOrigin = "anonymous";

这样做应该可以防止CORS访问限制。

- Fergal

5

只有当服务器设置了正确的Access-Control-Allow-Origin时，才能成功获取文件。但是，如果OP继续尝试从他的文件系统中获取文件（而不是从服务器中获取），那么这种情况发生的可能性非常小。 - Kaiido

4

你也可以设置<audio crossorigin="anonymous">。无论哪种方式，你都需要访问Web服务器，以便确保它发送Access-Control-Allow-Origin: *头部。 - AJ Richardson

最简单/最短的直接有效答案！喜欢就感谢！ - Endless

3

在<audio crossorigin="anonymous">上设置这个是我唯一行之有效的方法。 - Lee Probert

@LeeProbert 我不知道为什么，但我的是区分大小写的：crossOrigin="anonymous" 可以工作，但 crossorigin 就不行。 - patrick

显示剩余2条评论