Audio duration sometimes not showing

[totti-rdz]

Discussed in https://github.com/lhz516/react-h5-audio-player/discussions/172

^{Originally posted by totti-rdz September 14, 2022} I'm using the audio player in one of my projects with Next.js and Tailwind CSS and I've already noticed that sometimes the duration for a track is not shown. Only the placeholder --:-- at the end of the progress bar. At first I thought that this is maybe a network related issue, e.g. the duration can not be shown until the track is fully downloaded, but I'm not sure about that as sometimes I have the player open for a while.

I created a show project only with the audioplayer and one media file from wikipedia for another bug I wanted to inspect which turned out to be a feature in iOS (volume control not working) and the missing duration behaviour is showing here again.

The duration is missing sometimes on Mozilla Firefox 104.0.2 (64-bit) macOS and rarely on Chrome (macOS). Brave browser (android) and Safari (iOS) it seems that the duration is always shown, but I'm not sure about that.

Please visit: https://react-h5-audio-player.vercel.app/

https://github.com/totti-rdz/react-h5-audio-player

[DHFW]

@totti-rdz I had the same problem with a remix project. The solution is either to set the preload="none", but I didn't like that solution. So I figured out that because the page is server side rendered (like Next), I wrapped the audio player tag with a client only version like so:

<ClientOnly
        children={() => (
          <AudioPlayer autoPlay={false} src={piece?.url || ""} preload="auto" />
        )}
  ></ClientOnly>

This makes it render the audio player on the client where the duration then can be fetched from the file. Hope that helps!

[terryjiang2020]

@DHFW Can you explain how the "ClientOnly" works?

[kashifyl]

I'm having this same issue even though I have made my component as client-side but still, I get this issue with duration, does anyone have solved this issue?