Version

Description

Steps

/**
 * code
 */

Steps to Reproduce

Expected Behavior

Current Behavior

System information

Comments

Hi,
Clearing all song in playlist doesn't trigger onAudioListsChange.

on iOS,
1 . autoplay isn't working.
2. Seekbar shows NAN on total time.

This function autdioSeeked appears several times in codebase. I think it should be audioSeeked (without the additional 't').

Hi,
I am usgin React Music player, Right now player creates its html into body. is it possible that we can append player html into any sections/div rather then body.

I've used bounds property, but its not working.
bounds: document.getElementById('root'),

Here it the reference:
https://www.screencast.com/t/ESDG2mZk3s7Z

Thanks in advance.

Is there any way to toggle off mobilePlayer when the browser screen is small?
I don't see it in the option settings.

The onAudioDownload function is not very useful as it is called AFTER the redirect. The function could be useful for modifying the audio URL, for example appending download=1, or opening the download in a new window. To do this, the function should call the user function (if exists) first and then use the modified object to run the core code.

I hope this makes sense. And maybe this cannot be modified now due to backwards compatibility / functionality change, but then maybe a new function called something like onBeforeAudioDownload could be introduced to do this behavior.

Right now, clicking the download button will open the audio file in the same tab and thus killing the player and the entire React UI, and then my Chrome shows the mp3 in it's built-in player. With this function I could open in a new tab and append to the URL so that the platform that holds the mp3 will ask Chrome to download the mp3 file.

when using the theme prop set to "light" it's supposed to load a light theme player but is not. To fix this I had to manually add a className="light-theme"

Hi,

In my code
<ReactJkMusicPlayer ref={this.player} {...params} />

then i can use this.player.playxx()/pause this way. How to do that ? Thank you !

When resizing my browser window to trigger the mobile version of the player skin, the close button (top right-hand side) is not doing anything and keeps the whole player on top of the website which stops user navigation.

How To Get Index Or ID Of Music Playing?

Default mode is set to dark, i am trying to set theme to light but its still showing dark. Can you please have a look into this issue?

Hello,
How to play song that was just added to playlist ?

I changed clearPriorAudioLists to true then the song was added to the beginning and play that song. However, when I add the song again, it did nothing

It doesn't seem to stream the audio, rather it does download the whole file first making it quite slow.

希望作者能把 歌词显示加上就完美了

Music Player - Name of the title/tool-tip should be reload instead of roload on reload button hover.

I'm using create-react-app, node version 10.15.1, npm version 6.4.1.

When I install the player through npm then the buttons of the music player will stop working on mobile mode.
P.S. (when I use the source code directly the issue of the mobile buttons get solved but another issues will come)

------- package.json -------
{
"name": "musicfromnode",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-jinke-music-player": "^4.2.1",
"react-scripts": "2.1.8"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

------- Player.js -------

import React from "react";
import Player from "react-jinke-music-player";
import "react-jinke-music-player/assets/index.css";
import FaHeadphones from "react-icons/lib/fa/headphones";

const options = {...
};

class MusicPlayer extends React.Component {
state = {
params: options
};
constructor(props) {
super(props);
this.state = {
params: options
};
}

render() {
const { params } = this.state;
return (

export default MusicPlayer;

------- App.js -------

import React, { Component } from "react";
import Player from "./Player";

class App extends Component {
render() {
return (

export default App;

When using this player in a project where you are using a different css library that contains .progress-bar background-color, the player uses it, effectively messing the lovely theme. Please explicitly add this in the player css, for example for light theme:

.react-jinke-music-player-main.light-theme .progress-bar-content .progress-bar{
  background-color: white;
}

Steps to produce: Open the demo in chrome while mobile mode open in devtools, click anywhere.

Result: The music will restart and there is an error in the console Uncaught (in promise) DOMException

Description

The abilty to download audio/wav blob urls using the in built download function (downloadjs)

Reason

When passing a audio/wav blob url to the player i.e. "musicSrc":"blob:https://redacted/fe8ef69b-4e28-499d-8429-65914646eba1". When you click the download function the current player 4.7.2 downloads a .zip file which you cannot open. if you use onBeforeAudioDownload to set the mimeType and filename you get a 1kb wav file which cannot be played.

Current Workaround

    /**
     * Disable the built in download function to allow
     * us to handle this below in the onBeforeAudioDownload
     * function
     * @returns {void} void
     */
    objPlayerProps.onAudioDownload = () => {};

    objPlayerProps.onBeforeAudioDownload = (objAudioInfo) => {
      /**
       * Using the built in `onAudioDownload` alone or along with
       * the `onBeforeAudioDownload` to rename filename and mimeType does not work
       *
       * what we should be able to do here is just set the mimeType and filename
       * and then the download should work. 
       * If using `onAudioDownload` alone you get an invalid .zip file which cannot be opened
       * if using `onBeforeAudioDownload` you get a 1kb wav file which cannot be played
       * if fixed @see https://github.com/lijinke666/react-music-player/issues/80
       * we can then use
       * @example
       * return Promise.resolve({
       *  filename: `${objAudioInfo.name}.wav`,
       *  mimeType: 'audio/wav',
       *  src: objAudioInfo.musicSrc,
       * });
       *
       * Create our own download link as the one built
       * into this player downloads an invalid .zip file
       * when using a audio blob.
       */
      if (objAudioInfo.musicSrc) {
        FileSaver.saveAs(objAudioInfo.musicSrc, `${objAudioInfo.name}.wav`);
      }
      /**
       * onBeforeAudioDownload needs to rejects its promise to cancel the
       * standard downloadjs function
       */
      return Promise.reject();
    };

Possible Fix

Change from using downloadjs to https://www.npmjs.com/package/file-saver

When i change the state,i want to play the song that just added to the list,how can i do that?It's update the list,but still play the first song.
<ReactJkMusicPlayer className = "audioControl" audioLists = { [ { name:this.state.song.nameSong, musicSrc:'http://localhost:3001/song/' + this.state.song.id, }] } autoPlay={false} mode="full" />

Hi,

Nice player.

I'm considering to use this player for non-music files (recordings).

HTML5 audio supports playing a different speeds with setPlaybackRate(2) for double speed for example.

Would you consider adding that with a UI button to change speed?

The UI button could be configured with an array of objects setting the speed and the label for the button.

4.4.1 works fine with everything working, but after 4.4.2 webpack is throwing error Can't resolve 'react-jinke-music-player'

Our recordings do not have a cover photo and the only fairly sensible cover photo to show is a logo. Currently, when no cover is available, the player renders and empty round spot. But the cover photo (all the way to the left in the full player) also takes space in the UI, so it would be nice to either;

1. Auto-hide the cover photo if no cover photo is available
2. Make it possible to configure if it's shown or not, which would allow us to add a logo image and have it shown in the mini-player while hiding it in the full player to gain UI space

NB: This will be more feature request for now. And yes, I do anticipate to try doing one or more of these myself as a PR if time permits. Mostly registering them here to hopefully get your interest into getting these features in.

Trying to control play and pause with custom buttons doesn't work .Issue is the audio gets paused/played if i do this.audio.pause()/this.audio.play() . But the play/pause button doesn't sync with audio play/pause.

this.state = {
audio:null,
options: {
audioLists: [
{
singer: "Jay Chou",
cover: this.props.thumbnail,
musicSrc: this.props.streamUrl,
},
],
autoPlay: true,
mode: "full",
clearPriorAudioLists: true,
},
defaultPosition: {
bottom: 0,
},
};
togglePlay =()=>{
this.state.audio.pause()
}
<ReactJkMusicPlayer {...options} getAuioInstance={(instance=>this.setState({audio:instance})}/>
<button onClick={()=>this.togglePlay}>play

I tried to add custom field to audio item but it doesn't have that field after trigger audio info. Can you take a look ?

I'm new to React. I have my component set up this way and it fires the function on mount. What am I doing wrong? Thanks!

<ReactJkMusicPlayer ... onAudioProgress={this.trackTime('progress')} onAudioEnd={this.trackTime('end')} onAudioPause={this.trackTime('pause')} />

Hey, thanks for creating this project but I have gone through a problem where the loading circle just swirling over the place, can you please tell me how to disable or hide it.

Please go to https://www.npmjs.com/package/@dschoon/react-waves

If you can see the waves or peaks shows with the player, how we can do that in "react-jinke-music-player".
Please reply as soon as please.
Thank you :)

Player seekarbar on complete not goes to end, although timer is end

Please find the reference: https://www.screencast.com/t/iDhykahw

antd的button，a标签等，变成reset的默认样式，只import组件不引入css也一样。

Hello, I like to contribute with graphic designs, in opensource projects, so if you need something from me like a logotype or something else just say it, Im here ready to help you.
Love the screenshots of your player
Greetings!
Nuno Jesus

Hey, got a problem with updating track list update using redux.

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import ReactJkMusicPlayer from 'react-jinke-music-player';
import '../music-player/player.css';

@connect(({ PlayerTracks }) => ({
  tracks: PlayerTracks.tracks,
}))
export default class Container extends PureComponent {
  static propTypes = {
    tracks: PropTypes.array,
  }

  static defaultProps = {
    tracks: null,
  }

  render() {
    const { tracks } = this.props;
    return (
      <div>
        <ReactJkMusicPlayer drag={false} showThemeSwitch={false} mode='full'
                            showDownload={false} toggleMode={false}
                            audioLists={tracks} autoPlay={false}/>,
      </div>
    );
  }
}

If I have initial state like an empty array future update of audioList break ability to play any sound. If I define initial array with some data it's ok, but if I try to clearely update whole list smth went wrong:(
P.S. player is really awesome, thanks!:)

I'm using this awesome component within an app I'm building, but I noticed the styles for unordered list is not scoped to just the player; therefore, the global style inherits it. Can you scope it? Thanks!

Description

Are you planning to support Gapless playback? I'm planning to add this player to my music server and this would be great for playing live albums!

By the way: Thanks for this awesome player!

in my code
<ReactJkMusicPlayer ref={this.player} {...params} />

then i can use this.player.playxx() this way ,

To recreate:

1. Have a playlist with songs.
2. Open the list
3. Remove items, one by one
4. When removing the last item, watch the console and see the following error thrown

index.js:1509 Uncaught Error: The error you provided does not contain a stack trace.
    at B (index.js:1509)
    at G (index.js:1816)
    at index.js:1831
    at index.js:1850
    at index.js:1343
B @ index.js:1509
G @ index.js:1816
(anonymous) @ index.js:1831
(anonymous) @ index.js:1850
(anonymous) @ index.js:1343
applications:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.

Hey @lijinke666 , here is the list of features that could be awesome for your player

• On track list state change start auto-playing this list.
  For the first case you have an 3 tracks that loaded to your list, when list changed, player automatically starts playing from first track of the list
• Make some kind of flag in the request array which track to play.
  You have array of tracks info, as for now they played from the first one, we need to add some flag to alert the player that tracks playlist should start from some index
• Make track list bar customizible, I mean, we need to add some delete button for modifying this list if you want to drop this track from playing queue.
• Ordering in play queue, need to add some kind of track position dragging, click on track, drag out it to the first position of the queue etc.

Thanks a lot!

if you try install the pacekage

yarn add react-jinke-music-player

but have some problems, like this ?

[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error http://registry.npm.taobao.org/capture-stack-trace/download/capture-stack-trace-1.0.1.tgz: Integrity check failed for "capture-stack-trace" (computed integrity doesn't match our records, got "sha1-psC74fOPOqC5Ijjstv9Cw0TUE10=")

please try user npm install

rm -rf node_modules
npm install react-jinke-music-player

+ [email protected]

This should solve the problem of not being able to install . good luck !

Tried this in Chrome Version 73.0.3683.103 (Official Build) (64-bit) on my iMac v10.11.6

hello guys , i have 6 music div , and i want to play another music , when clicked on play button .
but i have not any callback function to say " please stop musiccccc, then , play THIS index.
can you please look at my code?
`class Latests extends Component {

play = (image, music, index) => {
    console.log(image, music, index);
    this.setState({play: true, music: music, image: image , index: index});
};

constructor(props, context) {
    super(props, context);
    this.state = {
        play: false,
        image: "",
        music: "",
        index:0
    };
}

render() {
    const {play, index} = this.state;

    const audioList = [
        {
            cover: t1,
            musicSrc: musicSource,
            name: "Canon (piano version)",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        },
        {
            cover: t2,
            musicSrc: musicSource,
            name: "Canon (piano version)2",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        },
        {
            cover: t3,
            musicSrc: musicSource,
            name: "Canon (piano version)3",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        },
        {
            cover: t4,
            musicSrc: musicSource,
            name: "Canon (piano version)4",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        },
        {
            cover: t5,
            musicSrc: musicSource,
            name: "Canon (piano version)5",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        },
        {
            cover: t6,
            musicSrc: musicSource,
            name: "Canon (piano version)6",
            volume: 100,
            networkState: 1,
            readyState: 4,
            played: {length: 1}
        }
    ];

    return (
        <div className="row align-content-center">
            <div className='col-12 row justify-content-center d-flex'>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={0} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t1}/>
                </div>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={1} music={musicSource2} playMusic={this.play} name={"WoW From OwO22"} image={t2}/>
                </div>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={2} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t3}/>
                </div>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={3} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t4}/>
                </div>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={4} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t5}/>
                </div>
                <div className={"col-3 m-1"}>
                    <LatestsCard index={5} music={musicSource} playMusic={this.play} name={"WoW From OwO"} image={t6}/>
                </div>
            </div>
            {play &&
            <ReactJkMusicPlayer
                onAudioPlayTrackChange={(audioInfo) => console.log(audioInfo)}
                seeked={true}
                preload={true}
                mode={"full"}
                glassBg={true}
                defaultPlayIndex={index}
                defaultPosition={{bottom: 60, left: 0}}
                audioLists={audioList}
            />
            }
        </div>
    );
}

}`

Hi, Currently onAudioListsChange only notifies if list changes but doesnt tell if audio is added or removed. Is there a way we can get that info too?

Thanks

  getPlayInfo = (audioLists = []) => {
    const _audioLists = audioLists.map(info => {
      return {
        ...info,
        id: uuId()
      };
    });
    const playIndex = Math.max(
      0,
      Math.min(audioLists.length, this.props.defaultPlayIndex)
    );
    const playId = this.state.playId || _audioLists[playIndex].id;
    const { name = "", cover = "", singer = "", musicSrc = "" } =
      _audioLists.find(({ id }) => id === playId) || {};
    return { name, cover, singer, musicSrc, audioLists: _audioLists, playId };
  };

The method above gets called every time a new track is added to an already rendered player. So that means every track in the list gets a new uuid everytime
So that means playId would refer to a uuid which has been overwritten, hence this _audioLists.find(({ id }) => id === playId) never matches.

In essence what happens is when a song is playing and you add a new song to the playlist the resulting state is always { name = "", cover = "", singer = "", musicSrc = "" } which causes the player to error

While I appreciate the mini player and full player swap and plan to actively use that feature, I think a proper close function would be nice. This could be an optional button, hidden by default if you like and be an "X" type icon all the way to the right, and an "X" in the corner of the mini player.

This would simply kill the component or do a callback to a function passed in as a prop to the player.

I know you have responded to this before, and that it's possible to simply not render the player from my own code, but that does not make it easy for me to let the user show and actively close the player. Once it's floating in one way or the other, I cannot let the user close the player from within the player, unless I do a hack with a floating close button, but that really is not optimal and having it inside the player, would be much better for usability.

I was thinking that clicking the button could be a flexible prop that defaults to destroying itself, but a function could also be passed which could be a prop passed function so I can kill it from my calling component. Hope it makes sense...

In Firefox and Edge, the audio source does not load.

Console:
Invalid URI. Load of media resource failed.

DOM:
<audio class="music-player-audio" src="https://domain.com/path_to_mp3"></audio>

It works fine in Chrome. Any thoughts? I'm loading the audioList from a fetch which updates the state in the component.

Let me show you my intent:
I add a song named "ABC" with ID: 123 to audioLists. Then when I pause that song in music player, the state song with same ID will change to paused as well

//audio pause handle

  onAudioPause(audioInfo) {
       const currenSong = findSong(audioInfo.ID)
       currentSong.playing = false
       setCurrentSong(currentSong)
  },

How to do that ? Thank you ! I can find the corresponding song by name but I am assuming there are same name songs

localhost:react-music-player-master jinglmalan$ yarn
yarn install v1.15.2
[1/4] 🔍 Resolving packages...
warning [email protected]: This version of react-dom/server contains a minor vulnerability. Please update react-dom to 16.4.2+. Learn more: https://fb.me/cve-2018-6341
[2/4] 🚚 Fetching packages...
error http://registry.npm.taobao.org/capture-stack-trace/download/capture-stack-trace-1.0.1.tgz: Integrity check failed for "capture-stack-trace" (computed integrity doesn't match our records, got "sha1-psC74fOPOqC5Ijjstv9Cw0TUE10=")
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Q: Can you help me? sir. what's the matter with that?

Hello, I am unable to change the mode

setOptions({
          ...options,
          mode: "full"
        })

I am using useState Hook and triggering on a button click

i am using SetState to push my list but it throws error, pushing one song works though