Das Problem, das ich habe, ist, dass meine React-App keine Audiodaten von anderen Quellen abspielt und einen CORS-Fehler erhält. Beispiel: https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3
Das Seltsame ist, dass ich, wenn ich https://www.w3schools.com/tags/tag_audio.asp besuche, die URL oben eingebe und auf „Play“ klicke.
Auf meiner lokalen React-App erhalte ich dann einen 302-Status und eine Weiterleitung. Das Audio-Tag enthält crossOrigin="anonymous" und die URL im src-Element.
Auf W3Schools wird irgendwie umgeleitet und ich erhalte von der umgeleiteten URL nur den Status 206.
So reproduzieren Sie:
您需要通过
new Audio(url)而不是XMLHttpRequest导入 mp3 URL，以避免 CORS。例如：class PlaySound extends React.Component { constructor(props) { super(props); this.state = { play: false }; this.url = "https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3"; this.audio = new Audio(this.url); this.togglePlay = this.togglePlay.bind(this); } togglePlay() { const wasPlaying = this.state.play; this.setState({ play: !wasPlaying }); if (wasPlaying) { this.audio.pause(); } else { this.audio.play(); setInterval(()=>{ console.clear(); let seconds = new Date().getSeconds(); let points = '.'.repeat(seconds % 4); console.log(`Loading audio${points}`); }, 1000); } } render() { return (
);
}
}
ReactDOM.render(