title: Looping Audio with React.js
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
              &lt;div&gt;
                  &lt;button
                      id="audioBtn"
                      onClick={this.togglePlay}&gt; {this.state.play ? &lt;PlayArrow /&gt; : &lt;Pause /&gt;}
                  &lt;/button&gt;
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>