Im Bau einer Webapp mit Angular4, die unter anderem Audiodateien abspielen soll. Leider habe ich keine Kontrolle über den Server, der die Mediendateien bereitstellt, und kann daher die Servereinstellungen nicht ändern. Angular Audioplayback ohne CORS
Wenn ich jetzt ein Audio-Element erstellen und direkt spielen, die Audio-Wiedergabe funktioniert wie erwartet:
var audio = new Audio();
audio.src = item.url; // the item is simply an object that holds the url and title
audio.load();
audio.play();
Wenn ich jetzt eine Spieler-Klasse, die die Wiedergabe-Funktionalität kapselt ich einen CORS Fehler erhalten, da die mp3 Produkte haben nicht die sachgemäßen Header gesetzt:
@Injectable
export class Player {
audio: any;
constructor(private zone: NgZone){
this.initialize();
}
initialize(){
if (!this.audio) {
this.audio = new Audio();
this.audio.autoplay.false;
this.audio.preload = 'auto';
this.audio.autobuffer = true;
this.audio.crossOrigin = "anonymous";
}
}
setUrl(url: string) {
this.initialize();
this.audio.pause();
this.audio.src = url;
this.audio.load();
}
play() {
this.audio.play();
}
pause() {
this.audio.pause();
}
}
die Fehlermeldung, die auf Spiel zurückgegeben wird die folgenden Ergebnisse, die im wesentlichen inidactes, dass die CORS Politik aus dem Element verhindert abgespielten:
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Gibt es eine Möglichkeit, dies zu umgehen? Und warum funktioniert es, wenn ich das Audioelement direkt im Controller anrufe?