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

MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file

本文关键字:mp3 文件 访问 输出 CORS MediaElementAudioSource      更新时间:2023-09-26

我有以下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访问限制而输出零。"既然它是本地文件,有没有办法绕过这个?

在初始化Audio对象之后,添加以下内容:

audio.crossOrigin = "anonymous";