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 |