Allow duration of song to be specified

[deluan]

Description

I'm using your player in my Music Server (https://github.com/deluan/navidrome), and it is working perfectly, thanks!

One thing that could be improved is: My server does transcoding on-the-fly (convert files from one format/bitrate to another), and when this happens, the player cannot get the proper duration, as the response from the server does not contain any Content-Length header.

Currently the player shows 00:0NaN and the progress bar does not work in these cases.

It would be awesome to be able to set the duration time in these cases (instead of getting it from the audio instance), so we would still see the proper duration and the progress bar would work properly.

[deluan]

Hey @lijinke666 no pressure, but do you have any idea when you'll be able to take a look at this?

Thanks very much for your hard work!

[lijinke666]

hi ~ @deluan the work is busy recently, sorry I didn't reply to you in time
i use AudioHTMLElement api by audio.duration and audio.currentTime.
so I don't know how to fix this problem, do you have any suggestions?

[deluan]

Sorry for taking so long to reply.

My idea was to simply add a new optional property to AudioListProp with the duration (float, in seconds) of the audio file:

interface ReactJkMusicPlayerAudioListProps {
  name: string | React.ReactNode,
  singer?: string | React.ReactNode,
  cover: string,
  musicSrc: string | () => Promise<string>,
  lyric?: string,
  duration?: number,     // <--- new field
  [key: string]: any
}>

Then when adding a song to the audioList, I could specify the duration of the song, like 210.6.
In the player, whenever you need the duration of the current file being played (ex: https://github.com/lijinke666/react-music-player/blob/master/src/index.js#L1762), you first check if the song has a duration specified. If it has, use it as duration. If not, get it from this.audio.duration.

I hope I was able to explain it clearly to you. Let me know what do you think.

[lijinke666]

@deluan Oh. i understand you mean, so your need a static field duration to support your feature. if music player can't get duration from this.audio instance. the player can use the duration field alternative. these days are holidays in china. so I will implement it. of course, you can also give a pr

[deluan]

Yes something like that, but this duration field would always be used if present. It would override the this.audio duration value.

Would love to contribute this in a PR, but not sure if I will have time to work on that before you

[lijinke666]

Done.

https://github.com/lijinke666/react-music-player#bulb-customize-audio-duration

[deluan]

Awesome, thanks! Will try this weekend!