A beautiful HTML5 responsive player component for react

react-jinke-music-player

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

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

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

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

AudioInfo

Like This

{
    cover:"xx.jpg"
    currentTime:10.211519
    duration:164.211519
    musicSrc:"xx.mp3"
    name:"Canon (piano version)"
    volume:100,
    muted:false,
    networkState:1,
    readyState:4,
    paused:false,
    ended:false,
    startDate:null,
    played:{length:1}
}

Properties

  static propTypes = {
    audioLists: PropTypes.array.isRequired,
    theme: PropTypes.oneOf(['dark', 'light']),
    mode: PropTypes.oneOf(['mini', 'full']),
    drag: PropTypes.bool,
    seeked: PropTypes.bool,
    autoPlay: PropTypes.bool,
    playModeText: PropTypes.object,
    closeText: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    openText: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    panelTitle:PropTypes.string,
    notContentText: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    controllerTitle: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    defaultPosition: PropTypes.shape({
      top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      left: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
    }),
    onAudioPlay: PropTypes.func,
    onAudioPause: PropTypes.func,
    onAudioEnded: PropTypes.func,
    onAudioAbort: PropTypes.func,
    onAudioVolumeChange: PropTypes.func,
    onAudioLoadError: PropTypes.func,
    onAudioProgress: PropTypes.func,
    onAudioSeeked: PropTypes.func,
    onAudioDownload: PropTypes.func,
    onAudioReload: PropTypes.func,
    onThemeChange:PropTypes.func,
    onAudioListsChange: PropTypes.func,
    onAudioPlayTrackChange: PropTypes.func,
    onAudioPlayModeChange: PropTypes.func,
    onModeChange: PropTypes.func,
    onAudioListsPanelChange: PropTypes.func,
    onAudioListsDragEnd: PropTypes.func,
    showProgressLoadBar:PropTypes.bool,
    showDownload: PropTypes.bool,
    showPlay: PropTypes.bool,
    showReload: PropTypes.bool,
    showPlayMode: PropTypes.bool,
    showThemeSwitch: PropTypes.bool,
    showMiniModeCover: PropTypes.bool,
    toggleMode: PropTypes.bool,
    once: PropTypes.bool,
    extendsContent: PropTypes.array,
    checkedText: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    unCheckedText: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
    ]),
    defaultVolume:PropTypes.number,
    playModeShowTime: PropTypes.number,
    bounds: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    showMiniProcessBar: PropTypes.bool,
    loadAudioErrorPlayNext: PropTypes.bool,
    preload: PropTypes.oneOfType([
      PropTypes.bool,
      PropTypes.oneOf(["auto", "metadata", "none"])
    ]),
    glassBg: PropTypes.bool,
    remember: PropTypes.bool,
    remove: PropTypes.bool,
    defaultPlayIndex: PropTypes.number
  }

GitHub