title: Can I use an HTML5 audio element to play a sound file in a functional component using React Hooks?
body: <p>I built a timer using functional components and React Hooks. When the timer reaches 00:00, an audio clip plays. My current code works using new Audio(). Here's a sample:</p>
  
  <pre><code>const Timer = () =&gt; {
     const [myAudio] = useState(new Audio(soundfile));
  
     const handleBeep = () =&gt; {
        myAudio.play();
     }
  </code></pre>
  
  <p>It works but doesn't pass the FCC test because I'm supposed to use an HTML5  tag. I tried the useRef() hook to select the audio file instead. However, myAudio was not recognized as an Audio object:</p>
  
  <pre><code>   const myAudio = useRef();
  
     const handleBeep = () =&gt; {
        myAudio.play();
     }
  
  return (
     &lt;div&gt;
     &lt;audio id='beep' ref={myAudio} src={soundfile} type='audio'/&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>I've used ref for  tags in class components before and I'm wondering if there is a way to do it with React Hooks in functional components. I would hate to have to totally restructure my code just to pass the test, so any input would be helpful.</p>