Ich versuche ein Audio-Visualisierungsprojekt auf Codepen zu erstellen. Ich habe versucht, die Audiodatei mit OneDrive zu hosten, aber ich erhielt CORS Restriktionsfehler. Jetzt bin ich einen Schritt weiter gegangen und habe meinen eigenen Webserver (http://publicwebserverdemo.hopto.org) erstellt, in dem ich die Audiodatei gehostet habe (http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3). Ich habe mehrere Anweisungen über das Internet ausprobiert, um CORS mit der .htaccess-Datei zu implementieren, aber ich hatte damit kein Glück. Wie kann ich CORS Zugriff auf Codepen für die Audiodatei gewähren?Wie kann ich den CORS-Zugriff für eine Audiodatei auf meinem Linux-Webserver mit apache2 einstellen?
Ich benutze Apache (mit dem ganzen LAMP-Paket) auf Ubuntu Mate 14.04.
Hier ist eine Replikation des Beispiel-Codepen (ich nahm den Code zum Testen von CORS von einem Ort im Internet).
Ihre Webinformationen Konsole öffnen und den CORS Hinweis Hinweis:
MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3
Vielen Dank für Ihre Hilfe :)
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = 'http://publicwebserverdemo.hopto.org/publicAudio/audio.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
\t document.getElementById('audio_box').appendChild(audio);
\t context = new webkitAudioContext(); // AudioContext object instance
\t analyser = context.createAnalyser(); // AnalyserNode method
\t canvas = document.getElementById('analyser_render');
\t ctx = canvas.getContext('2d');
\t // Re-route audio playback into the processing graph of the AudioContext
\t source = context.createMediaElementSource(audio);
\t source.connect(analyser);
\t analyser.connect(context.destination);
\t frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper(){
\t window.webkitRequestAnimationFrame(frameLooper);
\t fbc_array = new Uint8Array(analyser.frequencyBinCount);
\t analyser.getByteFrequencyData(fbc_array);
\t ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
\t ctx.fillStyle = '#00CCFF'; // Color of the bars
\t bars = 100;
\t for (var i = 0; i < bars; i++) {
\t \t bar_x = i * 3;
\t \t bar_width = 2;
\t \t bar_height = -(fbc_array[i]/2);
\t \t // fillRect(x, y, width, height) // Explanation of the parameters below
\t \t ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
\t }
}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; }<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
[Dies] (http://codepen.io/anon/pen/bZvKZw) scheint gut zu funktionieren, keine CORS-Einschränkung. – DavidDomain
Ja, aber wenn ich versuche, den Audioanalysator zu verwenden, um die Frequenz/Dezibel-Information zu erhalten, bekomme ich den CORS-Fehler; 'MediaElementAudioSource gibt Nullen aufgrund von CORS-Zugriffsbeschränkungen für http: // publicwebserverdemo.hopto.org/publicAudio/audio.mp3' aus. Der Ton kann geladen und "gut" angehört werden. Das Problem ist, wenn ich den Audioanalysator verwende, um Audioinformationen zu erhalten, bekomme ich den CORS-Fehler. – www139
Normalerweise fügen Sie die Direktive [Header hinzufügen] (http://stackoverflow.com/a/11691776/330987) mit der URL hinzu, die Sie zulassen möchten. –