音频文件无法在 reactjs 中播放答案

【问题标题】：Audio file doesn't play in reactjs音频文件无法在 reactjs 中播放
【发布时间】：2019-09-27 12:12:02
【问题描述】：

我一直在尝试在 Recact.js 中播放音频文件，但它无法播放。我没有遇到任何错误，滚动条显示但播放按钮不起作用。我试过播放这首歌来检查文件是否损坏。 mp3 文件工作正常。

import React from 'react'

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

export default AudioPlayer;

【问题讨论】：

您的音频文件是否已复制到应用的根文件夹中？
确保您拥有正确的音频文件并且 URL 也是正确的。可以肯定的是，检查您的音频并在新选项卡中打开其源代码。
我的音频文件和.js文件在同一个文件夹里，是的
我尝试播放 mp3 文件，它可以播放，我还能如何检查？
导入文件并直接使用它可能是要走的路...在我的答案中查看替代方法stackoverflow.com/questions/58134317/…

标签： javascript html reactjs audio-player

【解决方案1】：

由于您使用的是 create-react-app，我建议您将 mp3 文件移动到公用文件夹，然后使用我称之为 pathToPublic 的路径尝试以下操作：

import abc from '.../pathToPublic/public/abc.mp3'

<audio
  ref="audio_tag"
  autoPlay={true}
  controls={true} >
  <source type="audio/mp3" src={abc} />
</audio>

如果它有效，请告诉我们。

【讨论】：

好的。您的 mp3 文件是否与组件位于同一文件夹中？用于src 的路径可能是错误的。谢谢。
出于兴趣，您是从头开始构建应用还是尝试使用create-react-app？
它在同一个文件夹中。我使用了 create-react-app
我过去在 create-react-app 上遇到过类似的问题，我通过将我的媒体移动到 Webpack 不处理文件的公共文件夹中来解决。我已经更新了我的代码，所以你可以试一试。
太棒了。我很高兴它做到了:)

【解决方案2】：

./ 是一个相对路径，因此您的音频文件需要从与您的捆绑包相同的文件夹中提供。

如果您想让您的音频文件和播放器保持分离，这很好，但要确保它正常工作，请确保 a) 您的文件被复制到应用程序的输出文件夹中的某个位置，并且 b) 您从根目录引用路径，就像这样：

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

您也可以导入您的音频文件并直接使用它：

import abc from './../path/to/file/abc.mp3';

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

这是一个演示导入方法的工作沙箱：https://codesandbox.io/s/strange-leakey-7lk6f

【讨论】：

我的音频文件和这个 .js 文件在同一个文件夹中，我需要修改吗？
是的，因为当它被捆绑在一起时，它们将不再“在一起”
添加了一种可能适合您需求的替代方法

【解决方案3】：

你能放置正确的 src 文件吗？或者如果你想检查就放外部

  <div>
    <audio ref="audio_tag" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" controls autoPlay/>
  </div>

或者

<audio
  ref="audio_tag"
  autoPlay={true}
  controls={true}>
  <source type="audio/mp3" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" />
</audio>

【讨论】：

这确实有效！但我不明白为什么我的歌不会。请解释一下。