use-html-audio
v1.0.2
Published
A react custom hook for html audio player purpose with queue support.
Downloads
5
Readme
use-html-audio
A react custom hook for html audio player purpose with queue support.
Install
using npm:
$ npm install use-html-audio
using yarn:
$ yarn add use-html-audio
Usage
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 | |