Installation

using yarn :

yarn add react-jinke-music-player

using npm :

npm install react-jinke-music-player --save

Screenshots

mini mode

Light Theme

Dark Theme

mobile

Example

live example : https://lijinke666.github.io/react-music-player/

practical application : Jinke.Li's House

local example : http://localhost:8081/

Source Code

Usage

import React from "react";
import ReactDOM from "react-dom";
import ReactJkMusicPlayer from "react-jinke-music-player";
import "react-jinke-music-player/assets/index.css";

ReactDOM.render(
  <ReactJkMusicPlayer {...options} />,
  document.getElementById("root")
);

API

| Name | Type | Default | Description | | ------------ | ------- | ------- | ----------- | | className | string | - | Additional CSS class for the root DOM node | | audioLists | object[] | - | detail | | theme | string | dark | color of the music player theme dark | light | | defaultPosition | object | {top:0,left:0} | audio controller initial position with left,top,right,and bottom | | playModeText | object | {order: "order",orderLoop: "orderLoop",singleLoop: "singleLoop",shufflePlay:"shufflePlay"}| play mode text config of the audio player | | playModeShowTime |number |600 | play mode toggle show time (ms) | | bounds |object,number |body | specifies movement boundaries. Accepted values: parentrestricts movement within the node's offsetParent (nearest node with position relative or absolute), or a selector, restricts movement within the targeted node An object withleft, top, right, and bottomproperties. These indicate how far in each direction the draggable can be moved. | | preload |boolean,string |false | Whether to load audio immediately after the page loads. can be set toauto|metadata|none true|falseifpreload=truepreload="auto" | | remember |boolean |false | The next time you access the player, do you keep the last state | | glassBg |boolean |false | Whether the player's background displays frosted glass effect | | remove |boolean |true | The Audio Can be deleted | | defaultPlayIndex |number |0 | Default play index of the audio player | | playIndex |number |0 | play index of the audio player | | openText |string |open | audio controller open text | | closeText |string |close | audio controller close text | | panelTitle |string |PlayList | audio list panel title | | notContentText |string |no music | audio list panel show text of the playlist has no songs | | checkedText |string |- | audio theme switch checkedText | | unCheckedText |string |- | audio theme switch unCheckedText | | defaultPlayMode |string |order | default play mode of the audio player options can be set toorder,orderLoop,singleLoop,shufflePlayor omitted | | mode |string |mini | audio theme switch checkedText can be set tomini,fullor omitted | | once |boolean |false | The default audioPlay handle function will be played again after each pause, If you only want to trigger it once, you can set 'true' | | autoPlay |boolean |true | Whether the audio is played after loading is completed. | | toggleMode |boolean |true | Whether you can switch between two modes, full => mini or mini => full | | drag |boolean |true | audio controller is can be drag of the "mini" mode | | seeked |boolean |true | Whether you can drag or click the progress bar to play in the new progress. | | showMiniModeCover |boolean |true | audio cover is show of the "mini" mode | | showMiniProcessBar |boolean |false | audio progress circle bar is show of the "mini" mode | | showProgressLoadBar |boolean |true | Displays the audio load progress bar. | | showPlay |boolean |true | play button display of the audio player panel | | showReload |boolean |true | reload button display of the audio player panel | | showDownload |boolean |true | download button display of the audio player panel | | showPlayMode |boolean |true | play mode toggle button display of the audio player panel | | showThemeSwitch |boolean |true | theme toggle switch display of the audio player panel | | showLyric |boolean |false | audio lyric button display of the audio player panel | | lyricClassName |string |- | audio lyric class name | | emptyLyricPlaceholder |string |- | audio lyric empty lyric placeholder | | extendsContent |array |- | Extensible custom content like[button1,button2]| | controllerTitle |string | | audio controller title | | defaultVolume |number |100 | default volume of the audio player , range0-100| | loadAudioErrorPlayNext |boolean |true | Whether to try playing the next audio when the current audio playback fails | | onAudioDownload |function(audioInfo)|- | audio is downloaded handle | | onAudioPlay |function(audioInfo)|- | audio play handle | | onAudioPause |function(audioInfo)|- | audio pause handle | | onAudioSeeked |function(audioInfo)|- | When the user has moved/jumped to a new location in audio handle | | onAudioVolumeChange |function(audioInfo)|- | When the volume has changed handle min = 0.0 max = 1.0 | | onAudioEnded |function(audioInfo)|- | The single song is ended handle | | onAudioAbort |function(audioInfo)|- | audio load abort The target event like {...,audioName:xx,audioSrc:xx,playMode:xx}| | onAudioProgress |function(audioInfo)|- | audio play progress handle | | onAudioLoadError |function(audioInfo)|- | audio load failed error handle | | onAudioReload |function(audioInfo)|- | audio reload handle | | onAudioListsChange |function(currentPlayIndex,audioLists,audioInfo)|- | audio lists change handle | | onAudioPlayTrackChange |function(currentPlayIndex,audioLists,audioInfo)|- | audio current play track change handle | | onAudioPlayModeChange |function(playMode)|- | play mode change handle | | onAudioListsPanelChange |function(panelVisible)|- | audio lists panel change handle | | onThemeChange |function(theme)|- | theme change handle | | onModeChange |function(mode)|- | mode change handle | | onAudioListsDragEnd |function(fromIndex,endIndex)|- | audio lists drag end handle | | onAudioLyricChange |function(lineNum, currentLyric)|-` | audio lyric change handle |

Development

git clone https://github.com/lijinke666/react-music-player.git
yarn | npm install
yarn start | npm start
open `http://localhost:8081/`

Test case

npm run test

AudioList

Like This

interface ReactJkMusicPlayerAudioList {
  name: string | React.ReactNode,
  singer?: string | React.ReactNode,
  cover: string,
  musicSrc: string | () => Promise<string>,
  lyric?: string,
}>

AudioInfo

Like This

interface ReactJkMusicPlayerAudioInfo {
  cover: string,
  currentTime: number,
  duration: number,
  ended: boolean,
  musicSrc: string,
  muted: boolean,
  name: string,
  networkState: number,
  paused: boolean,
  played: any,
  readyState: number,
  startDate: any
  volume: number,
  lyric: string,
}

Properties

interface ReactJkMusicPlayerProps {
  audioLists: Array<ReactJkMusicPlayerAudioList>,
  theme?: ReactJkMusicPlayerTheme,
  mode?: ReactJkMusicPlayerMode,
  defaultPlayMode?: ReactJkMusicPlayerPlayMode
  drag?: boolean,
  seeked?: boolean,
  autoPlay?: boolean,
  playModeText?: {
    order: string | React.ReactNode,
    orderLoop: string | React.ReactNode,
    singleLoop: string | React.ReactNode,
    shufflePlay: string | React.ReactNode
  },
  panelTitle?: string | React.ReactNode,
  closeText?: string | React.ReactNode,
  openText?: string | React.ReactNode,
  notContentText?: string | React.ReactNode,
  controllerTitle?: string | React.ReactNode,
  defaultPosition?: {
    top: number | string,
    left: number | string,
    right: number | string,
    bottom: number | string
  },
  onAudioPlay?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioPause?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioEnded?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioAbort?: (data: any) => void,
  onAudioVolumeChange?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioLoadError?: (data: any) => void,
  onAudioProgress?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioSeeked?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioDownload?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onAudioReload?: (audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onThemeChange?: (theme: ReactJkMusicPlayerTheme) => void,
  onAudioListsChange?: (currentPlayId: string, audioLists: Array<ReactJkMusicPlayerAudioList>, audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  onPlayModeChange?: (playMode: ReactJkMusicPlayerPlayMode) => void,
  onModeChange?: (mode: ReactJkMusicPlayerMode) => void,
  onAudioListsPanelChange?: (panelVisible: boolean) => void,
  onAudioPlayTrackChange?: (fromIndex: number, endIndex: number) => void,
  onAudioListsDragEnd?: (currentPlayId: string, audioLists: Array<ReactJkMusicPlayerAudioList>, audioInfo: ReactJkMusicPlayerAudioInfo) => void,
  showDownload?: boolean,
  showPlay?: boolean,
  showReload?: boolean,
  showPlayMode?: boolean,
  showThemeSwitch?: boolean,
  showMiniModeCover?: boolean,
  toggleMode?: boolean,
  once?: boolean,
  extendsContent?: Array<React.ReactNode | string>,
  checkedText?: string | React.ReactNode,
  unCheckedText?: string | React.ReactNode,
  defaultVolume?: number,
  playModeShowTime?: number,
  bounds?: string | React.ReactNode,
  showMiniProcessBar?: boolean,
  loadAudioErrorPlayNext?: boolean,
  preload?: boolean | "auto" | "metadata" | "none",
  glassBg?: boolean,
  remember?: boolean,
  remove?: boolean,
  defaultPlayIndex?: number,
  playIndex?: number,
  lyricClassName?: string,
  emptyLyricPlaceholder?: string | React.ReactNode,
  showLyric?: boolean,
}

License

MIT