HTML 绝对 URL 的音频源在 React Component 中不起作用

Question

我有一个简单的音乐网络应用程序，可以在点击时更改音乐和图像封面，问题是当我点击一首歌曲时，封面图像正确更改但音频源不播放（src 属性设置正确但无法播放）

import React, {useState, useEffect} from "react";

const App = () => {
  const [songs, setSongs] = useState([]);
  const [playing, setPlaying] = useState({});
  const server_url = `http://localhost:8765`;

  useEffect(() => {
    fetch(server_url)
    .then(res => res.json())
    .then(jsonRes => {
      
      setPlaying(jsonRes.songs[0]);
      setSongs(jsonRes.songs);
    });
    
  }, []);
  
  return (
    <div>
      <div>
        <img src={`${server_url}/music/imgs/${playing.img}`} width="200" height="200" />
        <audio controls>
          <source src={`${server_url}/music/mp3/${playing.mp3}`} type="audio/mpeg" />
          Your browser does not support the audio element.
        </audio>
      </div>
      <div>
        <ul>
        {
        songs.map(song => {
          return (
            <li key={song.id} onClick={() => setPlaying(song)}>{song.name}</li>
          )
        })
        }
        </ul>
      </div>
    </div>
  );
}

export default App;

localhost:8765 的响应是这样的：

   {"songs":
      [
{"id":1,"name":"Hello","singer":"Adele","img":"adele.png","type":"pop","mp3":"Adele.mp3"},
{"id":2,"name":"de una vez","singer":"Selena gomez","img":"selena.png","type":"pop","mp3":"Selena.mp3"},
{"id":3,"name":"Bayda","singer":"Navid","img":"navid.png","type":"pop","mp3":"Navid.mp3"},
{"id":4,"name":"Takin' Back My Love ","singer":"Enrique Iglesias","img":"enrique.png","type":"Pop","mp3":"Enrique.mp3"}
]
}

Answer 1

您的 React 容器组件最初呈现时会出现损坏的图像和音频播放器。音频播放器无法恢复，因此第二个音频 source 元素无法正确加载

当获取数据调用耗时时，您应该阻止未定义的歌曲呈现或设置默认歌曲播放。 详细答案：在useEffect之后添加新的第二个return语句。当 songs 是空数组（您在第 4 行将其设置为默认值）时，然后 return 微调器或 return null（React 不会渲染组件，它基本上被跳过）。或次要解决方案是在第 4 行将更好的默认值设置为具有有效路径的图像和歌曲，这样它将在长运行获取数据调用之前加载。
在现有渲染中，将歌曲设置为自动播放，这样用户就无需按下播放键。 详细答案：在音频 JSX 元素上使用自动播放 HTML 属性（即 <audio controls autoplay>）
为您的获取数据调用添加防御代码。在 useEffect 中添加 try / catch 以便捕获和处理服务器错误。为了防止您的组件崩溃

HTML 绝对 URL 的音频源在 React Component 中不起作用

HTML audio src for absolute URL does not work in React Component

html

reactjs

html5-audio

use-state