YouTube Audio Player

Switch between examples. Both use the same hook API.

Single track

One YouTube URL, hidden video, your own audio UI.

Track: https://www.youtube.com/watch?v=bwB9EMpW8eY

Ready: false

Playing: false

Stopped: true

Error: false

Time: 0.0 / 0.0

Volume (70)

Seek

Minimal example (single)

tsx

1function SinglePlayer() {
2  const {
3    containerRef,
4    isReady,
5    play,
6    pause,
7    stop,
8    currentTime,
9    duration,
10    volume,
11    setVolume,
12  } = useYTAudio({
13    url: "https://www.youtube.com/watch?v=bwB9EMpW8eY",
14    autoplay: false,
15    initialVolume: 70,
16  });
17
18  return (
19    <div>
20      <div ref={containerRef} className="h-0 w-0 overflow-hidden" />
21      {/* your UI here */}
22    </div>
23  );
24}