title: Automatically play audio on website after delay
body: <p>I tried changing state play from <code>false</code> to <code>true</code> and also tried adding ComponentDidMount, ComponentDidUpdate, ComponentWillMount but nothing worked. I kept getting an error at some point.</p>
  
  <p>It works fine when clicking the play and pause button but I want it to play automatically after 2 seconds when someone visits the site.</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>import React from "react";
  class Music extends React.Component {
    constructor(props) {
      super(props);
      this.state = { play: false };
      this.url = "http://streaming.tdiradio.com:8000/house.mp3";
      this.audio = new Audio(this.url);
      this.togglePlay = this.togglePlay.bind(this);
    }
    //   componentDidMount = () =&gt; {
    //     this.togglePlay();
    //   };
    componentDidMount = () =&gt; {
      setTimeout(this.setState(this.togglePlay()), 500);
    };
    togglePlay() {
      this.setState({ play: !this.state.play });
      console.log(this.audio);
      this.state.play ? this.audio.play() : this.audio.pause();
    }
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.togglePlay}&gt;
            {this.state.play ? "Pause" : "Play"}
            {/* {this.state.play ? "Play" : "Pause"} */}
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Music;
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>index.js:1582 Uncaught Error: The error you provided does not contain a stack trace.
  
  
     at B (index.js:1582)
      at G (index.js:1899)
      at index.js:1914
      at index.js:1933
      at index.js:1414
  B @ index.js:1582
  G @ index.js:1899
  (anonymous) @ index.js:1914
  (anonymous) @ index.js:1933
  (anonymous) @ index.js:1414
  music.js:22 Uncaught (in promise) DOMException
  togglePlay @ music.js:22
  Music._this.componentDidMount @ music.js:16
  commitLifeCycles @ react-dom.development.js:16998
  commitAllLifeCycles @ react-dom.development.js:18512
  callCallback @ react-dom.development.js:147
  invokeGuardedCallbackDev @ react-dom.development.js:196
  invokeGuardedCallback @ react-dom.development.js:250
  commitRoot @ react-dom.development.js:18717
  completeRoot @ react-dom.development.js:20247
  performWorkOnRoot @ react-dom.development.js:20170
  performWork @ react-dom.development.js:20075
  performSyncWork @ react-dom.development.js:20049
  requestWork @ react-dom.development.js:19904
  scheduleWork @ react-dom.development.js:19711
  scheduleRootUpdate @ react-dom.development.js:20415
  updateContainerAtExpirationTime @ react-dom.development.js:20441
  updateContainer @ react-dom.development.js:20509
  push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
  (anonymous) @ react-dom.development.js:20974
  unbatchedUpdates @ react-dom.development.js:20292
  legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
  render @ react-dom.development.js:21037
  ./src/index.js @ index.js:16
  __webpack_require__ @ bootstrap:782
  fn @ bootstrap:150
  0 @ routes.js:17
  __webpack_require__ @ bootstrap:782
  checkDeferredModules @ bootstrap:45
  webpackJsonpCallback @ bootstrap:32
  (anonymous) @ main.chunk.js:1
  </code></pre>