Designing a Custom React Audio Player

In this episode of the Jett Engineering Podcast, we discuss the implementation of our custom React audio components. We built this to avoid heavy third-party audio player packages and retain full CSS customization control over timelines, volume sliders, and play buttons.

Technical Highlights

1. Element Binding with Refs

We bind the native HTML <audio> element to a React useRef to programmatically control playback status, query the active time index, and seek to new progress milestones:

const audioRef = useRef<HTMLAudioElement>(null);
const togglePlay = () => {
  const el = audioRef.current;
  if (!el) return;
  if (isPlaying) {
    el.pause();
  } else {
    el.play().catch(() => {});
  }
};

2. Time Seeking & Range Sliders

To build a custom scrubber, we listen to the timeupdate and durationchange listeners of the audio element to feed a custom slider input range:

• Skip Forward/Backwards: Increases or decreases the currentTime attribute of the element by a delta (e.g. +10 or -10 seconds).
• Mute / Volume Control: Directly manipulates the muted and volume attributes of the node, keeping the UI slider in sync.

All controls operate instantly, delivering a smooth experience.