1.0.2 • Published 4 years ago
use-html-audio v1.0.2
use-html-audio
A react custom hook for html audio player purpose with queue support.
Install
using npm:
$ npm install use-html-audiousing yarn:
$ yarn add use-html-audioUsage
import { useHtmlAudio } from "use-html-audio";
const MyComponent = () => {
const player = useHtmlAudio(hookInputs);
// player.element should be included somewhere in the jsx
// it wont affect the UI in any way (it is a hidden <audio> element).
return <div>{player.element}</div>;
};hookInputs
| name | type | desc |
|---|---|---|
| queue* | {src:"" , id: "" } | an array of audio urls with a unique id |
| autoNext | boolean | automatically play next track on finish |
| autoPlay | boolean | automatically play the first track |
| autoLoad | boolean | automatically load the first track |
player
| name | type | desc |
|---|---|---|
| element | html element | an tag that should be put in the jsx |
| loading | boolean | |
| duration | number (sec) | full length of the current track |
| currentDuration | number(sec) | current duration |
| progress | number | |
| playing | boolean | |
| currentTrack | object | |
| isMuted | boolean | |
| currentIndex | number | |
| buffering | boolean | |
| audioEnded | boolean | |
| togglePlay | funtion | |
| seekBySec | funtion | seekByPercent(sec) |
| seekByPercent | funtion | seekByPercent(percent), percent = 0-1 |
| playNext | function | |
| playPrev | funtion | |
| playAtIndex | funtion | |
| playAtId | funtion | |
| toggleMute | funtion |