Skip to content
Rabbithook

useAudio

Simplifies audio handling, includes play, pause and reset methods. Also includes volume and playrate controls.

Installation

npx rabbithook@latest add use-audio

Usage

App.tsx
import useAudio from "@/hooks/use-audio";


function Component() {
  const {
    ref,
    isPaused,
    currentSpeed,
    currentVolume,
    setVolume,
    setSpeed,
    play,
    pause,
    reset,
    increaseSpeed,
    decreaseSpeed,
  } = useAudio();


  return (
    <div>
      <audio ref={ref} src="..." />


      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={reset}>Reset</button>
      <button onClick={decreaseSpeed}>Decrease Speed</button>
      <button onClick={increaseSpeed}>Increase Speed</button>
      <input
        type="range"
        min="0"
        max="1"
        step="0.01"
        value={currentVolume}
        onChange={(e) => setVolume(e.target.value)}
      />
      <input
        type="range"
        min="0.5"
        max="2"
        step="0.1"
        value={currentSpeed}
        onChange={(e) => setSpeed(e.target.value)}
      />
    </div>
    )
}

Code

use-async.ts
import { useRef } from "react";


function useVideo() {
  const ref = useRef<HTMLAudioElement>(null);


  const audioAction = (action: (video: HTMLAudioElement) => void) => {
    if (ref.current) action(ref.current);
  }


  const play = () => audioAction(audio => audio.play());
  const pause = () => audioAction(audio => audio.pause());
  const reset = () => audioAction(audio => audio.currentTime = 0);
  const increaseSpeed = () => audioAction(audio => audio.playbackRate += 0.5);
  const decreaseSpeed = () => audioAction(audio => audio.playbackRate -= 0.5);
  const setVolume = (volume: number) => audioAction(audio => audio.volume = volume);
  const setSpeed = (speed: number) => audioAction(audio => audio.playbackRate = speed);


  return {
    ref,
    isPaused: !!ref.current?.paused,
    currentSpeed: ref.current?.playbackRate ?? 1,
    currentVolume: ref.current?.volume ?? 0,
    setVolume,
    setSpeed,
    play,
    pause,
    reset,
    increaseSpeed,
    decreaseSpeed,
  }
}


export default useVideo;