re-audio

Creating audio players in React has never been easier

Make sure to visit the documentation website at https://sina-byn.github.io/re-audio/

• Built with TypeScript for seamless integration in TypeScript projects
• Fully customizable with a headless component architecture
• Developer-friendly with an intuitive API
• Includes custom React hooks for easily creating audio visualizers

Compatibility Notice

Starting from version 2.0.0, this library is built on React 19 and is not compatible with previous versions of React.

If you are using React 18, please install version 1.1.1 of this library:

npm install --save @sina_byn/[email protected]

Installation

npm i --save @sina_byn/re-audio

Usage

// * AudioPlayer.tsx

import { Audio, formatTime } from '@sina_byn/re-audio';

// * components
import PlayBackControls from './PlayBackControls';

const AudioPlayer = () => {
  return (
    <Audio
      playlist={[
        { id: 1, src: '/audio/1.mp3', name: 'for-her-chill' },
        { id: 2, src: '/audio/2.mp3', name: 'trap-type-beat-rap-instrumental-riff' },
        { id: 3, src: '/audio/3.mp3', name: 'whip-afro-dancehall' },
      ]}
    >
      {audioContext => (
        <div>
          <header style={{ display: 'flex', gap: '1rem' }}>
            <span>{formatTime(audioContext.currentTime)}</span>
            <span>/</span>
            <span>{formatTime(audioContext.duration)}</span>
          </header>

          <footer style={{ display: 'flex', gap: '1rem' }}>
            <PlayBackControls />
          </footer>
        </div>
      )}
    </Audio>
  );
};

export default AudioPlayer;

// * PlayBackControls.tsx

import { useAudio } from '@sina_byn/re-audio';

const PlayBackControls = () => {
  const { playing, togglePlay, prevTrack, nextTrack } = useAudio();

  return (
    <>
      <button type='button' onClick={prevTrack}>
        prev
      </button>

      <button type='button' onClick={togglePlay}>
        {playing ? 'pause' : 'play'}
      </button>

      <button type='button' onClick={nextTrack}>
        next
      </button>
    </>
  );
};

export default PlayBackControls;