Tengo la siguiente página html en la que intento mostrar una clase para demostrar 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>Obtuve el archivo mp3 para que se reproduzca automáticamente antes de usar todo el código en la etiqueta del script, excepto lo que está 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 eludir esto ya que es un archivo local?
Justo después de inicializar el objeto Audio, agregue lo siguiente:
audio.crossOrigin = "anonymous";Esto debería evitar la restricción de acceso CORS.