title: Why can't I access Audio ref in React/Next.js?
body: <p>I'm using React/Next.js to create an Audio player, but I can't figure out how to get the duration of an audio file. As I understand it, I need to use the <code>useRef</code> hook to get access to the HTML Audio element with all the info about the file. Based on other examples I've seen, I should be able to do something like this:</p>
  <pre><code>const EXAMPLE_TRACK = {
    title: &quot;Track Title&quot;,
    src: &quot;http://goldfirestudios.com/proj/howlerjs/sound.ogg&quot;
  }
  
  const Track = ({track = EXAMPLE_TRACK}) =&gt; {
    const [duration, setDuration] = useState(0);
    const audioRef = useRef(typeof Audio !== &quot;undefined&quot; &amp;&amp; new Audio());
  
    useEffect(() =&gt; {
      audioRef.current = new Audio(track.src);
      console.log(audioRef)
      setDuration(audioRef.current.duration);
    }, [])
  
    return (
      &lt;&gt;
        &lt;div&gt;Title: {track.title}&lt;/div&gt;
        &lt;div&gt;Duration: {duration}&lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>What's odd here is that I can see the duration is 13 seconds in the console via <code>console.log(audioRef)</code>, but when I call <code>console.log(audioRef.current.duration)</code>, I get <code>NaN</code>. Maybe this has something to do with this being a SSR page, although I thought dropping this code in <code>useEffect</code> would make sure this component was mounted in the DOM before executing.</p>
  <p><a href="https://i.stack.imgur.com/asusA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/asusA.png" alt="audioRef.current" /></a></p>