Question

我正在努力让两个音频文件一个接一个地播放。在我的渲染功能中

getnext基本上不起作用。我尝试过返回创建音频对象然后自动播放的JSX，但这确实可行。我试过更改现有音频对象的src，然后播放，但这不起作用。

有关如何依次播放两个音频文件的建议？

Answer 1

不确定是否使用任何库，但是可以使用纯React.JS

只需确保您正在利用所有onEnded()标签具有的本机audio事件监听器。希望您喜欢KPOP：https://codesandbox.io/s/audio-playlist-42ou0

import React from "react";
import ReactDOM from "react-dom";
import bigbang from "./bigbang.mp3";
import girlsgeneration from "./girlsgeneration.mp3";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentFileIndex: 0,
      audioFiles: [
        { name: "girlsgeneration", source: girlsgeneration },
        { name: "bigbang", source: bigbang }
      ]
    };
  }

  goToNextSong = () => {
    const { currentFileIndex, audioFiles } = this.state;

    if (currentFileIndex < audioFiles.length - 1) {
      this.setState({
        currentFileIndex: currentFileIndex + 1
      });
      //restart playlist
    } else {
      this.setState({
        currentFileIndex: 0
      });
    }
  };

  createAudioPlayer = () => {
    const { currentFileIndex, audioFiles } = this.state;

    return (
      <div>
        <h4>Current Song: {audioFiles[currentFileIndex].name}</h4>
        <audio
          src={audioFiles[currentFileIndex].source}
          onEnded={this.goToNextSong}
          controls
          autoPlay
        />
      </div>
    );
  };

  render() {
    return <div>{this.createAudioPlayer()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在react render中播放音频序列

1 个答案: