Javascript 从服务器端点获取音频文件并在react应用程序中播放

我正在构建应用程序来收听列表中的声音/音乐

每个项目都有一个从API下载mp3文件的id

如何从API获取mp3，然后正确播放音频？我是否需要存储该文件，或者有一种方法可以动态加载和播放该文件

我收到的错误类似于

播放音频错误：DomeException:无法加载，因为找不到支持的源。

这是我的密码：

  const playAudio = async (id) => {
    try {
      const response = await axiosClient.get(`api/getaudio/id/${id}`)
      const mp3 = new Blob([response.data], { type: 'audio/mp3' })
      const url = window.URL.createObjectURL(mp3)
      const audio = new Audio(url)
      audio.load()
      await audio.play()
    } catch (e) {
      console.log('play audio error: ', e)
    }
  }
  return (
    <ul>
      {props.topList.map(item => (
        <li onClick={() => playAudio(item.id)}>{item.title}</li>
      ))}
    </ul>
  )

const playAudio=async（id）=>{
试一试{
const response=wait axioclient.get（`api/getaudio/id/${id}`）
constmp3=newblob（[response.data]，{type:'audio/mp3'}）
constURL=window.url.createObjectURL（mp3）
const audio=新音频（url）
audio.load（）
等待音频。播放（）
}捕获（e）{
console.log（'播放音频错误：'，e）
}
}
返回(

{props.topList.map（项=>(
playAudio（item.id）}>{item.title}
))}

)

您看过这个吗：。您需要将

responseType:'blob'

传递给您的axios请求。@AdolfoOnrubia是的，缺少了它。真的很快的帮助，它就像一个魅力！谢谢：D