Audio duration sometimes not showing

[totti-rdz]

Discussed in #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?

[iambherulal]

If you're using next you can do something like this only render the component on the client side. I hope it helps.

"use client";
import React, { useEffect, useState } from "react";
import AudioPlayer from "react-h5-audio-player";
import { MAIN_LAYOUT } from "react-h5-audio-player/lib/constants";
import "react-h5-audio-player/lib/styles.css";

interface CYAudioPlayerProps {
  audioUrl: string | null;
  className?: string;
  layout?: MAIN_LAYOUT;
  showVolumeControl?: boolean;
}

export const CYAudioPlayer: React.FC<CYAudioPlayerProps> = ({
  audioUrl,
}) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!audioUrl || !mounted) return null;
  return (
    <AudioPlayer
    autoPlay
    src={audioUrl}
    onPlay={e => console.log("onPlay")}
  />
  );
};