reactjs - 如何在React中创建音频进度栏？

Question

如何在React JS中创建音频进度栏？
我有一个音频列表，它们正在正常播放，但是没有显示音频的进度。

我也有音频的持续时间。

我的歌曲数组的代码-

const songs = [
      {
        song1: "http://streaming.tdiradio.com:8000/house.mp3",
        desc: "01. Clouds In The Forest",
        time: "3:20"
      },
      {
        song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
        desc: "02. Rat In The River",
        time: "2:48"
      },
      {
        song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
        desc: "03. Giants And Companions",
        time: "2:27"
      },
      {
        song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
        desc: "04. Ashamed Of Light",
        time: "3:32"
      },
      {
        song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
        desc: "05. Doubting The Forest",
        time: "2:40"
      },
      {
        song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3",
        desc: "06. Criminals Of The Lake",
        time: "2:55"
      }
    ];

音频代码列表为-

{songs.map(song => (
                <div className="row" style={{ color: "#827474" }}>
                  <div className="col-md-7">
                    <a
                      style={{ cursor: "pointer", display: "inline-flex" }}
                      getdesc={song.desc}
                      gettime={song.time}
                      id={song.song1}
                      key={song.song1}
                      onClick={this.togglePlay}
                    >
                      {this.state.currentSong !== song.song1 ||
                      !this.state.play ? (
                        <img
                          src={playbutton}
                          className="img-responsive img-new"
                          alt="Image"
                        />
                      ) : (
                        <img
                          src={pausebutton}
                          className="img-responsive img-new"
                          alt="Image"
                        />
                      )}
                      &nbsp;&nbsp;&nbsp;
                      {song.desc}
                    </a>
                  </div>
                  <div className="col-md-3">
                    <p>..................................</p>
                  </div>
                  <div className="col-md-2">
                    <p>{song.time}</p>
                  </div>
                </div>
              ))}

togglePlay的代码是-

audio = null;

  togglePlay = e => {
    const song = e.target.id;
    var getdesc = e.target.getAttribute("getdesc");
    var gettime = e.target.getAttribute("gettime");
    console.log(getdesc);
    this.setState({ finaltext: getdesc, finaltime: gettime });
    if (this.state.currentSong === song) {
      this.state.play ? this.audio.pause() : this.audio.play();
      this.setState({ play: !this.state.play });
    } else {
      if (this.audio) {
        this.audio.pause();
      }

      this.setState({
        currentSong: song,
        play: true
      });
      this.audio = new Audio(song);
      this.audio.play();
    }
  };

如何显示组件中音频的进度？

Answer 1

您可以使用html audio tag
那里您必须传递链接，其余的将由html处理，也无需处理播放暂停。

这是我已经完成的琴键链接:https://jsfiddle.net/8nm5jrxf/4/

const songs = [  
  {
    song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    desc: "02. Rat In The River",
    time: "2:48"
  },
  {
    song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3",
    desc: "03. Giants And Companions",
    time: "2:27"
  },
  {
    song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
    desc: "04. Ashamed Of Light",
    time: "3:32"
  },
  {
    song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3",
    desc: "05. Doubting The Forest",
    time: "2:40"
  },
  {
    song1: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3",
    desc: "06. Criminals Of The Lake",
    time: "2:55"
  }
];

class Hello extends React.Component {
    state = {
    currentSongIndex: 0,
  }
  render() {
    return (
        <audio controls>
          <source src={songs[this.state.currentSongIndex].song1} type="audio/mpeg"/>
          Your browser does not support the audio element.
        </audio>
    )
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

您可以使用列表来更改当前歌曲索引，并且播放器中的歌曲也会更改。