# use-html-audio

> A react custom hook for html audio player purpose with queue support.

Latest version **1.0.2** (published 2020-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-html-audio
pnpm add use-html-audio
yarn add use-html-audio
bun add use-html-audio
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-07-18 |
| First published | 2020-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | abreham |

## Links

- npm: https://www.npmjs.com/package/use-html-audio
- Repository: https://github.com/abrehamgezahegn/use-html-audio
- Homepage: https://github.com/abrehamgezahegn/use-html-audio#readme
- Issues: https://github.com/abrehamgezahegn/use-html-audio/issues
- npm.io page: https://npm.io/package/use-html-audio

## Recent versions

- 1.0.2 (latest) — 2020-07-18
- 1.0.1 — 2020-07-18
- 1.0.0 — 2020-07-18

## 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 <audio> 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    |                                              |

---
_Source: https://npm.io/package/use-html-audio · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._