Javascript React中的HTML5音频标签

我想在我的react应用程序中使用一个简单的HTML5音频标记。我的组件如下所示：

import React from 'react'

class AudioPlayer extends React.Component {
  render() {
    return (
      <div>
        <audio ref="audio_tag" src="./static/music/foo.mp3" controls autoPlay/>
      </div>
    );
  }
}

export default AudioPlayer;

从“React”导入React
类AudioPlayer扩展了React.Component{
render（）{
返回(
);
}
}
导出默认音频播放器；

---

但它就是不起作用。我也没有得到任何错误。我现在已经将mp3文件放在我应用程序的每个文件夹中，并尝试了不同的路径等，但它似乎无法识别它。我是否遗漏了一些琐碎的东西？

我不小心使用了一个损坏的音频文件，因此这解释了为什么我的解决方案无法“工作”。正如Jordan Running所指出的，上面的代码很好，所以我将把它作为答案。

在用户事件中播放时，看看它是否有效（因此，添加一个按钮和一个处理程序，用.play（）播放音频）。好的，我试过了。我得到：

Uncaught（in promise）domeException:元素没有受支持的源。

，这意味着问题可能是浏览器无法加载音频文件。不幸的是，您没有告诉我们您是如何提供文件的，因此我们无法帮助您。