title: How to fix Promise {<pending>} when trying to play an audio file on keydown event in Gatsby framework?
body: <p>I'm attempting to add a HTML/Javascript drumkit I've made to my Gatsby site. Currently, no sounds play when keys are pressed, and the promise returned from audio.play() hangs at "pending".</p>
  
  <p>I've gotten this to work with basic HTML/JS as well as with a standard React app. But when trying to incorporate it into my Gatsby site, I run into the below issues with the returned promises, and no sounds play.</p>
  
  <pre><code>[[PromiseStatus]]: "pending"
  [[PromiseValue]]: undefined
  </code></pre>
  
  <p>The git repo for the whole Gatsby site is here (currently only dev build) <a href="https://github.com/mfuller22/FullerStackProgramming" rel="nofollow noreferrer">https://github.com/mfuller22/FullerStackProgramming</a></p>
  
  <p>The directory for the specific page I'm having trouble with is here <a href="https://github.com/mfuller22/FullerStackProgramming/tree/master/src/pages/Projects/DrumKit" rel="nofollow noreferrer">https://github.com/mfuller22/FullerStackProgramming/tree/master/src/pages/Projects/DrumKit</a></p>
  
  <p>I will add my React code in a few hours. I don't currently have it with me.</p>
  
  <pre><code>componentDidMount() {    
    document.addEventListener("keydown", this.handleKeyDown.bind(this));
  }
  
  handleKeyDown = (event) =&gt; {
    if (event.keyCode === parseInt(this.props.id, 10))
      this.playSound()
  }
  
  playSound = () =&gt; {
    const audio = document.getElementById('sound'+this.props.id);
    const key = document.querySelector(`div[data-key="${this.props.id}"]`);
    audio.currentTime = 0;
    console.log(audio)
    var playPromise = audio.play();
    console.log(playPromise)
    playPromise.catch(error =&gt; {
      audio.play();
    });
    key.classList.add('playing');
  };    
  
  render() {
    const { id, letter, sound } = this.props
  
    return (
      &lt;div
        id={'key'+id}
        data-key={id}
        onClick={() =&gt; this._playSound}
        onKeyDown={() =&gt; this._playSound}
        onTransitionEnd={() =&gt; this._onTransitionEnd}
        className="key"&gt;
        &lt;kbd&gt;{letter}&lt;/kbd&gt;
        &lt;span className="sound"&gt;{sound}&lt;/span&gt;
        &lt;audio id={'sound'+id}&gt;
          &lt;source src={sound} type="audio/wav" /&gt;
        &lt;/audio&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>I would expect the promise to be returned with a status of resolved, but currently the promise status is pending, and the promise value is undefined.</p>