使用反应播放器播放mp3文件时出现"Cannot play media. No decoders for requested formats: text/html"错误

Question

我一直试图用react播放器播放一个音频文件，但它似乎没有正确读取文件。这是我用来播放文件的React道具。

<ReactPlayer 
forceAudio
controls
width='100%'
url='../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3'
type = 'audio/mp3'
/>

每当我的应用程序渲染时，播放器都不会读取文件，并在Firefox控制台中给我以下错误：

Cannot play media. No decoders for requested formats: text/html

我用过的其他浏览器没有

Answer 1

在webpack中为mp3添加文件加载程序

您的加载程序需要了解您使用的文件，您可以使用webpack中的标准文件加载程序将这些文件捆绑到您的构建中。这里有一个关于如何使用这个的问题。然后将文件作为变量导入，并将其传递给组件。导入很重要，因为这就是webpack查看捆绑内容的方式。

import mp3 from '../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3';
...
<ReactPlayer 
forceAudio
controls
width='100%'
url={mp3}
type = 'audio/mp3'
/>