MediaElementAudioSource uscite zeri a causa di restrizioni di accesso CORS di file mp3 locale

Ho la seguente pagina HTML che sto cercando di mostrare una classe per dimostrare un visualizzatore di audio con un file MP3 memorizzati localmente:MediaElementAudioSource uscite zeri a causa di restrizioni di accesso CORS di file mp3 locale

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

ho ottenuto il file mp3 per riprodurre automaticamente prima di usare tutto il codice nel tag script escludendo ciò che è al di sotto della linea di

audio.autoplay = true;

ma quando includo il funzione frameLooper Ottengo il messaggio "MediaElementAudioSource restituisce zeri a causa delle restrizioni di accesso CORS." C'è comunque un modo per aggirare questo dato che si tratta di un file locale?

fonte

2015-07-09 Adam Freymiller

Non è possibile accedere ai file dal filesystem in questo modo, utilizzare un server Web e accedervi dallo stesso dominio, protocollo e porta – adeneo

Installare Python e vedere come creare un server Web locale con Python dalla cartella corrente: 'python -m http.server 8000' https://docs.python.org/3/library/http.server.html - quando si accede su http, molte limitazioni CORS diventano più sensate. –

@adeneo queste cose vengono configurate all'interno del file wsgi di un progetto di framework web? –

Subito dopo l'inizializzazione dell'oggetto audio, aggiungere il seguente:

audio.crossOrigin = "anonymous";

Questo dovrebbe evitare che la restrizione di accesso CORS.

fonte

2015-09-11 02:05:52 Fergal

Solo se il server ha l'impostazione corretta Access-Control-Allow-Origin, cosa molto improbabile che accada se OP continua a cercare file dal suo filesystem (non da un server) – Kaiido

Puoi anche impostare '

MediaElementAudioSource uscite zeri a causa di restrizioni di accesso CORS di file mp3 locale

risposta

Problemi correlati