音频文件不在 reactjs 中播放

Question

我一直在尝试播放 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;

Answer 1

由于您使用的是 create-react-app，我建议您将您的 mp3 文件移动到 public 文件夹，然后使用我称为 pathToPublic 的内容尝试以下操作，无论您需要进入文件的什么路径:

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

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

让我们知道它是否有效。

Answer 2

你能放正确的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>

Answer 3

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

如果你想让你的音频文件和播放器分离，这很好，但要确保它起作用，请确保 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

音频文件不在 reactjs 中播放

Audio file doesn't play in reactjs

html

javascript

audio-player

reactjs