4.11.4 • Published 4 years ago
react-jinke-music-player-no-mobile v4.11.4
:package: Installation
using yarn
:
yarn add react-jinke-music-player
using npm
:
npm install react-jinke-music-player --save
:framed_picture: Screenshots
mini mode
Light Theme
Dark Theme
mobile
:sparkles: Feature list
- Beautiful ui and animation
- Responsive
- Support theme switch
- Support TypeScript (d.ts)
- Complete hook function
- Custom operation ui
- Custom downloader
- Support destroy player
- Support glass background
- Media Session (v4.11.0)
- Support internationalization (v4.11.0)
- Customize Theme (v4.11.0)
:eyes: Example
live example :
local example : http://localhost:8081/
:memo: 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")
);
:clipboard: API
Name | Type | Default | Description | |
---|---|---|---|---|
className | string | - | Additional CSS class for the root DOM node | |
audioLists | AudioListProps[] | - | Detail | |
theme | light | dark | dark | color of the music player theme dark | light |
locale | zh_CN | en_US | CustomLocale | en_US | Detail | light |
defaultPosition | object | {top:0,left:0} | audio controller initial position with left,top,right,and bottom | |
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|metadata|none true|false if preload=true preload="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 | |
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 | |
showMediaSession | boolean | false | https://web.dev/media-session/ | |
lyricClassName | string | - | audio lyric class name | |
extendsContent | array \| ReactNode \| boolean \| string | - | Extensible custom content like <><button>button1</button> <button>button2</button></> | |
defaultVolume | number | 1 | default volume of the audio player , range 0 -1 | |
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(volume) | - | When the volume has changed handle min = 0.0 max = 1.0 | |
onAudioEnded | function(currentPlayId,audioLists,audioInfo) | - | The single song is ended handle | |
onAudioAbort | function(currentPlayId, audioLists, audioInfo) | - | audio load abort The target event like {...,audioName:xx,audioSrc:xx,playMode:xx} | |
onAudioProgress | function(audioInfo) | - | audio play progress handle | |
onAudioLoadError | function(errMsg,currentPlayId, audioLists, audioInfo) | - | audio load failed error handle | |
onAudioReload | function(audioInfo) | - | audio reload handle | |
onAudioListsChange | function(currentPlayId,audioLists,audioInfo) | - | audio lists change handle | |
onAudioPlayTrackChange | function(currentPlayId,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 | |
getContainer | () => HTMLElement | Selectors | document.body | Return the mount node for Music player | |
getAudioInstance | (instance: HTMLAudioElement) => void | - | get origin audio element instance , you can use it do everything | |
autoHiddenCover | boolean | false | Auto hide the cover photo if no cover photo is available | |
onBeforeAudioDownload | (audioInfo: ReactJkMusicPlayerAudioInfo) => Promise<TransformedDownloadAudioInfo> | - | transform download audio info before | |
clearPriorAudioLists | boolean | false | Replace a new playlist with the first loaded playlist, | |
autoPlayInitLoadPlayList | boolean | false | Play your new play list right after your new play list is loaded turn false. | |
spaceBar | boolean | false | Play and pause audio through space bar (Desktop effective). | |
showDestroy | boolean | false | Destroy player button display | |
onBeforeDestroy | function(currentPlayId,audioLists,audioInfo) | - | custom destroy handler before | |
onDestroyed | function(currentPlayId,audioLists,audioInfo) | - | player destroyed handle | |
customDownloader | function(downloadInfo: TransformedDownloadAudioInfo) | - | custom download handle |
:bulb: Custom operation ui
Support feature:
play
pause
reload
change play time
change playbackRate
change volume
destroy audio player
class App extends React.Component{
constructor() {
this.audioInstance = null
}
render() {
return (
<>
<ReactJkMusicPlayer getAudioInstance={instance => this.audioInstance = instance}/>
<button onClick={() => this.audioInstance.play()}>play</button>
<button onClick={() => this.audioInstance.pause()}>pause</button>
<button onClick={() => this.audioInstance.load()}>reload</button>
<button onClick={() => (this.audioInstance.currentTime = 40)}>
change current play time
</button>
<button onClick={() => (this.audioInstance.playbackRate = 2)}>
change play back rate
</button>
<button onClick={() => (this.audioInstance.volume = 0.2)}>change volume</button>
<button onClick={() => this.audioInstance.destroy()}>destroy player</button>
</>
)
}
}
:bulb: Glass bg
<ReactJkMusicPlayer glassBg/>
:bulb: Custom downloader
const customDownloader = (downloadInfo) => {
const link = document.createElement('a')
link.href = downloadInfo.src // a.mp3
link.download = downloadInfo.filename || 'test'
document.body.appendChild(link)
link.click()
}
<ReactJkMusicPlayer audioLists={[{src: "a.mp3"}]} customDownloader={customDownloader}/>
// use onBeforeAudioDownload
const onBeforeAudioDownload = () => {
return Promise.resolve({
src: '1.mp3',
})
}
const customDownloader = (downloadInfo) => {
console.log(downloadInfo.src) // 1.mp3
}
<ReactJkMusicPlayer
customDownloader={customDownloader}
onBeforeAudioDownload={onBeforeAudioDownload}
/>
:bulb: Destroy player
const onBeforeDestroy = (currentPlayId, audioLists, audioInfo) => {
return new Promise((resolve, reject) => {
// your custom validate
if (window.confirm('Are you confirm destroy the player?')) {
// if resolve, player destroyed
resolve()
} else {
// if reject, skip.
reject()
}
})
}
const onDestroyed = (currentPlayId, audioLists, audioInfo) => {
console.log('onDestroyed:', currentPlayId, audioLists, audioInfo)
}
<ReactJkMusicPlayer
showDestroy
onBeforeDestroy={onBeforeDestroy}
onDestroyed={onDestroyed}
/>
:bulb: Media session
// so cool, so easy !!!
<ReactJkMusicPlayer showMediaSession />
:bulb: Internationalization
Version: 4.11.0
import Locale from 'react-jinke-music-player/lib/config/locale'
// Two languages are provided by default
// one of zh_CN | en_US
<ReactJkMusicPlayer locale={Locale.zh_CN}/>
// <ReactJkMusicPlayer locale={'en_US'}/>
// Custom override
const customLocale = {
playModeText: {
order: '',
orderLoop: '',
singleLoop: '',
shufflePlay: ''
},
openText: '',
closeText: '',
notContentText: '',
clickToPlayText: '',
clickToPauseText: '',
nextTrackText: '',
previousTrackText: '',
reloadText: '',
volumeText: '',
playListsText: '',
toggleLyricText: '',
toggleMiniModeText: '',
destroyText: '',
downloadText: '',
lightThemeText: '',
darkThemeText: '',
switchThemeText: '',
removeAudioListsText: '',
controllerTitle: '',
emptyLyricText: '',
clickToDeleteText: (name) => ``,
audioTitle: ''
// audioTitle: (audioInfo) => ``
}
<ReactJkMusicPlayer locale={customLocale}/>
// Support partial override, auto merge
<ReactJkMusicPlayer locale={{ audioTitle: "xxx" }}/>
:bulb: Customize Theme
import ReactJkMusicPlayer from "react-jinke-music-player";
import "react-jinke-music-player/lib/styles/index.less";
@primary-color: #31c27c;
@default-color: #d9d9d9;
@bg-color: #f7f8fa;
@border-color: #d9d9d9;
@light-theme-panel-bg: #fff;
@light-theme-controller-bg: #fff;
@music-player-panel-height: 80px;
@lists-panel-width: 480px;
@lists-panel-height: 410px;
@lists-panel-item-bg: #40444b;
@lists-panel-item-bg-light: #fff;
@panel-header-height: 50px;
@panel-bg: rgba(0, 0, 0, 0.7);
@font-color: #444;
@player-width: 80px;
@player-height: @player-width;
@base-color: rgba(255, 255, 255, 0.6);
@progress-load-bar-bg-color: rgba(0, 0, 0, 0.06);
@common-animate-type: cubic-bezier(0.43, -0.1, 0.16, 1.1);
@common-animate-time: 350ms @common-animate-type;
@progress-bar-bg-color-light: rgba(0, 0, 0, 0.09);
@progress-bar-bg-color-dark: #fff;
@player-lyric-color: @primary-color;
@player-lyric-font-size: 36px;
@player-lyric-font-size-mobile: 16px;
@player-lyric-z-index: 999;
Customize in webpack
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [
...
{
loader: 'less-loader',
+ options: {
+ modifyVars: {
+ 'primary-color': '#444',
+ // or
+ 'hack': `true; @import "your-less-file-path.less";`, // Override with less file
+ },
+ javascriptEnabled: true,
+ },
}],
}],
}
Customize in less file
@import 'react-jinke-music-player/lib/styles/index.less';
@import 'your-theme-file.less';
:pencil: Development
git clone https://github.com/lijinke666/react-music-player.git
yarn | npm install
yarn start | npm start
open `http://localhost:8081/`
:hourglass: Test case
npm run test
:bulb: AudioListProps
Like This
interface ReactJkMusicPlayerAudioListProps {
name: string | React.ReactNode,
singer?: string | React.ReactNode,
cover: string,
musicSrc: string | () => Promise<string>,
lyric?: string,
[key: string]: any
}>
:bulb: 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,
[key: string]: any
}