React 中的 HTML5 音頻標簽

Question

我想在我的 React 應用程序中使用一個簡單的 HTML5 音頻標簽。 我的組件如下所示：

import React from 'react'

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

export default AudioPlayer;

但它不會播放。 我也沒有收到任何錯誤。 我現在已經將 mp3 文件放在我的應用程序中的每個文件夾中，並嘗試了不同的路徑等，但它似乎無法識別它。 我是否錯過了一些微不足道的東西？

Answer 1

我不小心使用了損壞的音頻文件，所以這解釋了為什么我的解決方案“不起作用”。 上面的代碼，正如 Jordan Running 指出的那樣，很好，所以我將把它作為答案。