javascript - 音频文件无法在 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;

标签： javascripthtmlreactjsaudio-player

Answer 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>

让我们知道它是否有效。