mobin-ava-music-player v1.6.19
Ava Music Player (ReactJS Music Player)
Installation
$ npm install mobin-ava-music-player
Getting started
import AvaMusicPlayer from "mobin-ava-music-player";
import "mobin-ava-music-player/dist/style.css";
function App() {
return (
<>
<AvaMusicPlayer
playlist={{
id: 1,
scope: "audiom",
name: "playlist name",
cover: "playlist cover",
startIndex: 1,
description: "playlist description",
items: [
{
music_id: "1",
name: "music name",
artist: [
{
artist_name: "artist name",
artist_id: 1,
},
],
cover: "music cover",
url: ["music url"],
lyric: "music lyric",
timestamp: 1,
quality: "320",
from: "string",
music_duration: 1,
mood: [""],
genre: [""],
tags: [""],
},
],
}}
/>
</>
);
}
<div id="root"></div>
<div id="ava-music-player-dialog-root"></div>
<!-- Add This line for player portal -->
API Reference
API | Type | required | Default | Description |
---|---|---|---|---|
playlist | PlaylistType | ✓ | - | playlist data |
log | boolean | ✘ | - | If set to 'true,' it enables logging |
xWebId | string | ✘ | - | Set x-web-id to log request header |
provider | string | ✘ | "unknown" | set provider to send in log request |
playStatus | boolean | ✘ | - | set play status |
preFetchAudioCount | number | ✘ | 5 | Define number of prefetch audios |
preFetchAudioSize | number(MB) | ✘ | 100 MB | Define maximum size of prefetch |
onClose | function => {} | ✘ | - | Music player close event |
onOpenFullscreen | function => {} | ✘ | - | Event trigger when music player get full screen |
onCloseFullscreen | function => {} | ✘ | - | Event trigger when music player minimize from full screan |
onMusicChange | function => music | ✘ | - | Event trigger when active music change and reutrns audio and it's index in musics list |
onPlay | function => music | ✘ | - | Event trigger on music change or play |
onPlay | function => {} | ✘ | - | Event trigger on music pause |
onError | function => url, isLastUrl, music | ✘ | - | Event trigger when music url is bloken |
PlaylistType:
API | Type | required | Default | Description |
---|---|---|---|---|
id | number | ✓ | - | playlist id |
scope | string | ✓ | - | It indicates the service user of the web service. Its value for audiom is 'audiom' |
name | string | ✓ | - | Playlist name |
description | string | ✓ | - | Playlist description |
cover | string,null | ✓ | - | Playlist cover |
timestamp | number | ✘ | - | Playlist create date |
shareUrl | string | ✘ | - | Share url of playlist |
startIndex | number | ✓ | - | Each playlist has a startIndex. When played, it starts playing the music that corresponds to this index, (Change it to change the playing music) |
items | AudioType | ✓ | - | List of musics |
AudioType:
API | Type | required | Default | Description |
---|---|---|---|---|
music_id | string | ✓ | - | Music Id |
name | string | ✓ | - | Music name |
artist | Artist[] | ✓ | - | Music artists information |
cover | string , null | ✓ | - | Music Cover |
url | string[] | ✓ | - | Music urls |
lyric | string | ✘ | - | Music lyric |
shareUrl | string | ✘ | - | Music share url |
timestamp | number | ✓ | - | Music create date |
quality | string | ✓ | - | Music quality |
from | string | ✓ | - | It specifies where the music should be played from. It could be from a specific page like the home page or an artist's page, a playlist, shuffle mode, or the respective album. |
music_duration | number | ✓ | - | Music duration |
mood | string[] | ✓ | - | Music moods list |
genre | string[] | ✓ | - | Music genres list |
tags | string[] | ✓ | - | Music tags list |
Artist:
API | Type | required | Default | Description |
---|---|---|---|---|
artist_name | string | ✓ | - | Artist name |
artist_id | string | ✓ | - | Artist Id |
5 months ago
4 months ago
5 months ago
4 months ago
4 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
8 months ago
9 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago