使用react-player播放mp3文件时出现“无法播放媒体。请求的格式没有解码器:文本/html”错误

Question

我一直在尝试用react-player播放单个音频文件，但它似乎无法正确读取该文件。这是我用来播放我的文件的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

在mp3的webpack中添加一个文件加载器

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

import mp3 from '../../../../../build/assets/audio/Big_O_Opening_US_Version.mp3';

...

<ReactPlayer 
    forceAudio
    controls
    width='100%'
    url={mp3}
    type = 'audio/mp3'
/>