πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A beautiful, responsive, themeable HTML5 music player component for React.

Audio_Video React

Documentation

logo

react-jinke-music-player

🎡 Maybe the best beautiful HTML5 responsive player component for react : )

npm npm Build Status npm version Coverage Status

δΈ­ζ–‡ζ–‡ζ‘£

Installation

using yarn :

yarn add react-jinke-music-player 

using npm :

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

Screenshots

mini mode

mini mode

Light Theme

light theme

Dark Theme

dark theme

mobile

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
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: parent restricts movement within the node's offsetParent (nearest node with position relative or absolute), or a selector, restricts movement within the targeted node An object with left, top, right, and bottom properties. 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 to `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 to order,orderLoop,singleLoop,shufflePlay or omitted
mode string mini audio theme switch checkedText can be set to mini,full or 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 [<button>button1</button>,<button>button2</button>]
controllerTitle string <FaHeadphones/> audio controller title
defaultVolume number 100 default volume of the audio player , range 0-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


You May Also Like