Question

我想在React组件中包含一个音频播放器，该音频播放器播放从URL加载的wav文件。尽管这可以直接用于HTML5 class App extends React.Component { constructor(props) { super(props); this.state = { comment: '' } } getValue = e => { this.setState({comment: e.target.value}) } render() { return ( <div> <textarea type="text" value={this.state.comment} onChange={this.getValue} /> <div>this.state.comment: {this.state.comment}</div> </div> ) } } ReactDOM.render(<App />, document.getElementById('root'));元素，但我无法播放它（我只是看到控件元素）。

我试图用相同的代码播放.mp3，但有效。我检查了应该支持.wav的Chrome和Safari，但它们都不支持。我尝试将<audio>元素替换为react-audio-player，react-player和react-sound元素-它们都不起作用。当我打开URL时，声音将作为附件下载。

<audio>

我希望看到一个音频控制器，当我按Play时会开始播放声音。取而代之的是，我看到一个音频控制器，在按播放时不执行任何操作，并且声称音频文件的长度为0秒。我检查了URL-如果直接将其作为URL粘贴到浏览器中是正确的。

Answer 1

如果您使用的是create-react-app，则必须导入音频文件。

import wavUrl from './path/to/file';

// ... rest of code here

Answer 2

如Kitanga所述，您可以使用import从公共（而不是完整的URL访问）加载文件，例如：

import somefile from '../public/assets/mp3/test1.mp3'

然后

Play extends Component {
...
}

render(
  <Play file=somefile>
)

但是，如果您在开始时发现了webpack错误消息：“您可能需要适当的加载程序来处理此文件类型...”，那么看来您需要加载适当的扩展名npm包才能读取并配置webpack.config.js，例如：

 ...
 module: {
   rules: [
     {
       test: /\.mp3$/,
       loader: "file-loader"
     },
     ...
   ]
   ...
 ...

如果未安装“文件加载器”，则使用示例：

 npm install --save file-loader

如何在React / html5中播放wav（从URL加载）？

2 个答案: