首頁  >  問答  >  主體

解決播放來自另一個網站的mp3檔案的CORS錯誤

我遇到的問題是,我的 React 應用程式無法播放來自其他來源的音頻,並出現 CORS 錯誤。 範例:https://audio.podigee-cdn.net/1041740-m-0fcf92e897e7cd93200a43cf103a75fb.mp3

奇怪的是,當我訪問 https://www.w3schools.com/tags/tag_audio.asp 時,輸入上面的網址並點擊播放即可。

在我的本機 React 應用程式上,我隨後獲得 302 狀態和重定向。音訊標記包含 crossOrigin="anonymous" 和 src 元素中的 url。

在 W3Schools 上,它會以某種方式進行重定向,我只從重定向的 URL 中獲得狀態 206。

如何重現:

  1. git 複製 https://github.com/SamTV12345/PodFetch.git
  2. 遵循「建構」部分中的自述文件說明
  3. git checkout 起源/開發
  4. 新增任何超過 5 集的播客。
  5. 點選 CloudIcon

P粉662361740P粉662361740224 天前388

全部回覆(1)我來回復

  • P粉801904089

    P粉8019040892024-04-01 19:41:22

    您需要透過 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(, document.getElementById("root"));
    sssccc
    sssccc
    
    

    回覆
    0
  • 取消回覆