Looping Audio with React.js - reactjs

Question

I think this is a rather simple question, but I am trying to self-learn React.js and am a bit confused about how audio loops. I understand looping when rendering and returning plain html audio tags, but I am not sure how to do it without. So far I have learned how to toggle play and pause buttons thanks to another StackOverflow question I found, but am not sure how to make the audio loop as well. I would like to keep the current code if possible (I tried to use the audio tags mentioned above instead when rendering, but it was hard to re-incorporate the image toggling again) and just learn how to incorporate looping into it. Any help or resources would be much appreciated! Below is the code I have reduced it to so far:
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

you can just set loop = true
togglePlay() {
this.setState({
play: !this.state.play
});
this.state.play ? this.audio.play() : this.audio.pause();
this.audio.loop = true;
}

Answer 2

You can add an ended listener to your Audio object in which you set the time back to 0 and start playing it again.
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>