https://github.com/lludol/react-hl-audio

React-hl-audio is a lightweight, headless React library for easy and flexible management of HTML5 audio elements, without prescribing UI design.
https://github.com/lludol/react-hl-audio

Last synced: about 2 months ago
JSON representation

React-hl-audio is a lightweight, headless React library for easy and flexible management of HTML5 audio elements, without prescribing UI design.

• Host: GitHub
• URL: https://github.com/lludol/react-hl-audio
• Owner: lludol
• License: mit
• Created: 2024-04-10T18:19:16.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-10-28T11:41:59.000Z (3 months ago)
• Last Synced: 2024-10-28T15:05:29.502Z (2 months ago)
• Language: TypeScript
• Size: 4.59 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  React Headless Audio





  React-hl-audio is a lightweight, headless React library for easy and flexible management of HTML5 audio elements, without prescribing UI design.



---

## Usage

```bash

npm install react-hl-audio # or yarn add react-hl-audio or pnpm add react-hl-audio

```

```jsx

import { AudioPlayerProvider } from 'react-hl-audio';

import Audio from './Audio';

function App() {

  return (

    

      

        

      

    

  )

}

export default App

```

```jsx

import { type ChangeEventHandler, useCallback } from 'react';

import { AudioPlayer, useAudioPlayer } from './../../src/index';

import SampleMP3 from './sample.mp3';

function pad(string: number) {

	return (`0${string}`).slice(-2);

}

function format(seconds: number): string {

	const date = new Date(seconds * 1000);

	const hh = date.getUTCHours();

	const mm = date.getUTCMinutes();

	const ss = pad(date.getUTCSeconds());

	if (hh) {

		return `${hh}:${pad(mm)}:${ss}`;

	}

	return `${mm}:${ss}`;

}

const Audio = () => {

	const {

		playing, currentTime, progress, duration, play, pause, seekTo, loaded,

	} = useAudioPlayer();

	const onChange: ChangeEventHandler = useCallback((e) => {

		seekTo((duration / 100) * Number(e.target.value));

	}, [duration, seekTo]);

	return (

		


			


			{ !loaded && 
Loading...
}


			{ loaded && <>

				

					{ playing ? "Pause" : "Play" }

				

				

				


					

						{format(currentTime)}

					

					/

					

						{format(duration)}

					

				

			>}

		

	);

};


export default Audio;

```

## Props

### AudioPlayer

| Props                    | Type                       | Default | Note           |

| ------------------------ | -------------------------  | ------- | -------------- |

| src                      | string                     |         |                |

| autoPlay                 | boolean                    | false   |                |

| onProgress               | (progress: number) => void |         | In percent (%) |

| onFirstPlay              | () => void                 |         |                |

| onEnded                  | () => void                 |         |                |

### useAudioPlayer

| Props                    | Type                   | Default | Note           |

| ------------------------ | ---------------------- | ------- | -------------- |

| loaded                   | boolean                | false   |                |

| playing                  | boolean                | false   |                |

| duration                 | number                 | 0       | In seconds     |

| currentTime              | number                 | 0       | In seconds     |

| progress                 | number                 | 0       | In percent (%) |

| play                     | () => void             |         |                |

| pause                    | () => void             |         |                |

| seekTo                   | (time: number) => void |         |                |

## Contributing

Don't hesitate to [create a pull request](https://github.com/lludol/react-hl-audio/pulls) to improve the project.

## Bugs

If you find a bug or want a new feature, don't hesitate to [create an issue](https://github.com/lludol/react-hl-audio/issues).

## License

[MIT](LICENSE)