javascript - specify - MediaElementAudioSource genera ceros debido a restricciones de acceso a CORS archivo local de mp3
main html (1)
Tengo la siguiente página html que estoy tratando de mostrar una clase para mostrar un visualizador de audio con un mp3 almacenado localmente:
<!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>
He conseguido que el archivo mp3 se reproduzca automáticamente antes de usar todo el código en la etiqueta de script, excluyendo lo que hay debajo de la línea
audio.autoplay = true;
pero cuando incluyo la función frameLooper, aparece el mensaje "MediaElementAudioSource genera ceros debido a las restricciones de acceso de CORS". ¿Hay alguna forma de evitar esto ya que es un archivo local?
Justo después de inicializar el objeto de audio, agregue lo siguiente:
audio.crossOrigin = "anonymous";
Esto debería evitar la restricción de acceso CORS.