# react-youtube-music-player

> A simple React hook for building a music player using the official YouTube IFrame Player API

Latest version **1.0.5** (published 2022-08-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-youtube-music-player
pnpm add react-youtube-music-player
yarn add react-youtube-music-player
bun add react-youtube-music-player
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-08-28 |
| First published | 2022-08-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 26.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Carl-Robert Linnupuu |
| Maintainers | carlrobertoh |

## Links

- npm: https://www.npmjs.com/package/react-youtube-music-player
- npm.io page: https://npm.io/package/react-youtube-music-player

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 1.0.5 (latest) — 2022-08-28
- 1.0.4 — 2022-08-24
- 1.0.3 — 2022-08-24
- 1.0.2 — 2022-08-24
- 1.0.1 — 2022-08-24
- 1.0.0 — 2022-08-24

## README

# react-youtube-music-player

[![NPM](https://img.shields.io/npm/v/react-youtube-music-player.svg)](https://www.npmjs.com/package/react-youtube-music-player) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![alt text](https://github.com/carlrobertoh/react-youtube-music-player/blob/master/demo/demo-player.png?raw=true)

For example player, [click here](https://c7b19f.csb.app/)

## Installation

```bash
npm install react-youtube-music-player
```

## Usage

```tsx
import { useYoutube } from "react-youtube-music-player";
```

```tsx
const { playerDetails, actions } = useYoutube({
  id: "RDLbqzhXWl33U",
  type: "playlist",
});
```

### Input props

| Prop      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`      | The id of a video or playlist to play                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `type`    | Set `video` or `playlist` depending on the id                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `options` | `origin`: Origin domain for additional security <br/> `autoplay`: Whether to autoplay the video <br /> `host`: Points host to correct origin for CORS <br /> `loop`: Whether a single video should be looped <br /> `mute`: Whether to start the video muted <br /> `start`: Time, in seconds from the beginning of the video, when to start playing <br /> `end`: Points host to correct origin for CORS <br /> `host`: Time, in seconds from the beginning of the video, when to stop playing |
| `events`  | `onReady`: Called when media is initialized and ready to play <br/> `onStateChanged`: Called when video state changed <br /> `onError`: Called when error occurs                                                                                                                                                                                                                                                                                                                                |

### Return props

#### State of the player: `playerDetails`

| Prop          | Description                                                                                        |
| ------------- | -------------------------------------------------------------------------------------------------- |
| `id`          | The id of currently playing video                                                                  |
| `state`       | Current state of the media - UNSTARTED(-1), ENDED(0), PLAYING(1), PAUSED(2), BUFFERING(3), CUED(5) |
| `title`       | Title of the video                                                                                 |
| `duration`    | Duration of the media, in seconds                                                                  |
| `currentTime` | Number of seconds that have been played                                                            |
| `volume`      | Volume of the player                                                                               |

#### Internal player functions: `actions`

| Function name                     | Description                                 |
| --------------------------------- | ------------------------------------------- |
| `playVideo()`                     | Play video                                  |
| `stopVideo()`                     | Stop video                                  |
| `pauseVideo()`                    | Pause video                                 |
| `nextVideo()`                     | Play next video                             |
| `previousVideo()`                 | Play previous video                         |
| `setVolume(volume)`               | Set the volume of the player, between 0-100 |
| `seekTo(seconds, allowSeekAhead)` | Seek to the given number of seconds         |

---
_Source: https://npm.io/package/react-youtube-music-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._