Зацикливание аудио с React.js

Question

Я думаю, что это довольно простой вопрос, но я пытаюсь самостоятельно изучить React.js и немного запутался в том, как зацикливается звук.Я понимаю зацикливание при рендеринге и возврате простых html-тэгов, но я не уверен, как это сделать.До сих пор я узнал, как переключать кнопки воспроизведения и паузы, благодаря другому обнаруженному мной вопросу StackOverflow, но я не уверен, как сделать аудио цикл.Я хотел бы сохранить текущий код, если это возможно (я пытался использовать упомянутые выше звуковые теги при рендеринге, но было трудно заново включить переключение изображения) и просто научиться включать в него циклы.Любая помощь или ресурсы будут высоко ценится!Ниже приведен код, который я до сих пор сократил:

export class PlaySound extends Component {
    constructor(props) {
        super(props);

        this.state = {
            play: true
        };

        this.url = "https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg";
        this.audio = new Audio(this.url);
        this.togglePlay = this.togglePlay.bind(this);
    }

    togglePlay() {
        this.setState({
            play: !this.state.play
        });

        this.state.play ? this.audio.play() : this.audio.pause();
    }

    render() {
        return (
            <div>
                <button
                    id="audioBtn"
                    onClick={this.togglePlay}> {this.state.play ? <PlayArrow /> : <Pause />}
                </button>
            </div>
        );
    }
}

Answer 1

Вы можете добавить ended слушателя к вашему Audio объекту, для которого вы установите время обратно на 0 и начать его воспроизведение снова.

class PlaySound extends Component {
  constructor(props) {
    super(props);

    this.state = {
      play: true
    };

    this.url = "https://actions.google.com/sounds/v1/water/waves_crashing_on_rock_beach.ogg";
    this.audio = new Audio(this.url);
    this.audio.addEventListener('ended', function () {
      this.currentTime = 0;
      this.play();
    }, false);
    this.togglePlay = this.togglePlay.bind(this);
  }

  // ...
}

class PlaySound extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      play: false
    };

    this.url = "https://actions.google.com/sounds/v1/water/air_woosh_underwater.ogg";
    this.audio = new Audio(this.url);
    this.audio.addEventListener('ended', function () {
      this.currentTime = 0;
      this.play();
    }, false);
    this.togglePlay = this.togglePlay.bind(this);
  }

  togglePlay() {
    const wasPlaying = this.state.play;
    this.setState({
      play: !wasPlaying
    });

    if (wasPlaying) {
      this.audio.pause();
    } else {
      this.audio.play()
    }
  }

  render() {
    return (
      <div>
        <button
          id="audioBtn"
          onClick={this.togglePlay}> {this.state.play ? "Pause" : "Play"}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<PlaySound />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>