https://github.com/sina-byn/re-audio

A highly customizable React audio player library with support for modern web audio features and seamless integration into any React application.
https://github.com/sina-byn/re-audio

audio audio-player javascript media-player music-player re-audio react react-component react-hooks typescript

Last synced: 3 months ago
JSON representation

A highly customizable React audio player library with support for modern web audio features and seamless integration into any React application.

• Host: GitHub
• URL: https://github.com/sina-byn/re-audio
• Owner: sina-byn
• License: mit
• Created: 2024-08-05T10:45:17.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-01-17T12:54:33.000Z (6 months ago)
• Last Synced: 2025-03-21T06:33:24.245Z (3 months ago)
• Topics: audio, audio-player, javascript, media-player, music-player, re-audio, react, react-component, react-hooks, typescript
• Language: TypeScript
• Homepage: https://sina-byn.github.io/re-audio/
• Size: 36 MB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# re-audio [![NPM version](https://img.shields.io/npm/v/@sina_byn/re-audio.svg?style=flat)](https://www.npmjs.com/package/@sina_byn/re-audio) [![NPM monthly downloads](https://img.shields.io/npm/dm/@sina_byn/re-audio.svg?style=flat)](https://npmjs.org/package/@sina_byn/re-audio) [![NPM total downloads](https://img.shields.io/npm/dt/@sina_byn/re-audio.svg?style=flat)](https://npmjs.org/package/@sina_byn/re-audio)

> Creating audio players in React has never been easier

![re-audio banner](/public/banner.png)

> Make sure to visit the documentation website at [https://sina-byn.github.io/re-audio/](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

## Installation

```bash

npm i --save @sina_byn/re-audio

```

## Usage

```tsx

// * AudioPlayer.tsx

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

// * components

import PlayBackControls from './PlayBackControls';

const AudioPlayer = () => {

  return () => (

    

      {audioContext => (

        


          

            {formatTime(audioContext.currentTime)}

            /

            {formatTime(audioContext.duration)}

          


          

            

          

        

      )}

    

  );

};


export default AudioPlayer;

```

```tsx

// * PlayBackControls.tsx

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

const PlayBackControls = () => {

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

  return (

    <>

      

        prev

      

      

        {playing ? 'pause' : 'play'}

      

      

        next

      

    >

  );

};

export default PlayBackControls;

```