web-dev-qa-db-fra.com

MediaElementAudioSource génère des zéros en raison des restrictions d'accès CORS fichier mp3 local

J'ai la page html suivante que j'essaie de montrer une classe pour démontrer un visualiseur audio avec un mp3 stocké localement:

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

J'ai obtenu le fichier mp3 pour jouer automatiquement avant d'utiliser tout le code dans la balise de script à l'exclusion de ce qui est en dessous de la ligne

audio.autoplay = true;

mais lorsque j'inclus la fonction frameLooper, je reçois le message "MediaElementAudioSource génère des zéros en raison des restrictions d'accès CORS." Est-il possible de contourner cela car il s'agit d'un fichier local?

javascripthtmlcorshtml5-audio
26
Adam Freymiller

Juste après avoir initialisé l'objet audio, ajoutez ce qui suit:

audio.crossOrigin = "anonymous";

Cela devrait empêcher la restriction d'accès CORS.

40
Fergal