If the audio file does not exist, the controls are still displayed

[ptmkenny]

Describe the bug

If you use an invalid URL (404, file not found) for the audio URL, the audio controls are still displayed, and the user can press play/pause. (The duration shows as --:--.)

I think it would be better if there was some kind of error message (file not found, etc.) Or the controls should not be operable.

Example code that caused the issue:

const AudioPlayer: React.FC<MyProps> = ({ mediaUrl, userObject }: MyProps) => (
  <H5AudioPlayer
    src={mediaUrl}
    // Preload the whole file.
    preload="auto"
    // Hide fast-forward/rewind buttons.
    showJumpControls={false}
    // Remove volume controls.
    customVolumeControls={[]}
  />
);

Where mediaUrl is www.example.com/file-that-does-not-exist.mp3.

Environment

Package version: 3.9.3 React version: 18

[lhz516]

When the url is invalid, onError event will be triggered. You can do the logic in the callback

[ptmkenny]

Thanks, I got it working with your suggestion:

const AudioPlayer: React.FC<MyProps> = ({ mediaUrl, userObject }: MyProps) => {
  const [isVisible, setIsVisible] = useStateBoolean();
  if (isVisible) {
    return (
      <H5AudioPlayer
        src={mediaUrl}
        // Preload the whole file.
         preload="auto"
        // Hide fast-forward/rewind buttons.
        showJumpControls={false}
        // Remove volume controls.
        customVolumeControls={[]}
        onError={(error) => {
          console.log('audio player error', error);
          setIsVisible(false);
        }}
      />
    );
  }
  return 'Failed to load audio!';
};