lijinke666 / react-music-player

[Stop the maintenance] :musical_note: Maybe the best beautiful HTML5 responsive player component for react :)
https://lijinke666.github.io/react-music-player/
MIT License
715 stars 210 forks source link

Using volume normalization information if passed to the player #98

Closed JaneX8 closed 4 years ago

JaneX8 commented 4 years ago

Description

Volume is usually a big problem in music libraries. When volume is normalized tools like MP3Gain and I believe also replaygain add information to the ID3 tag without touching the data itself. So just analyzing the volume and adding metadata. I think we should have a setting to enable support for that at least in the webplayer. I don't know exactly what tags are used for that but I suggest that we research that and use that information.

I have some ideas on the implementation (and I have no idea if it's a common implementation like this, just came to my mind).

Lets say we have three songs with different volume levels and the following volume information is passed to the player (by the music streaming server, such as Navidrome):

Song A: 25 Song B: 50 Song C: 75 Assuming the normal level should be 50, you'd expect Song A to have a metadata tag saying +25 and song C having a tag saying -25.

Now I suggest we introduce two volume levels in the Web Player. One Hidden and one Shown. The Shown one is simply for the user to control the output volume from 0-100%.

The hidden one can be used for the volume correction according to the metadata tag. So when our hidden volume is 50, we can use the tag to add or remove 25 from the baseline volume depending on the metadata tag but it won't affect the volume setting of the users 0-100% which is just an overall volume control.

Originally posted here: https://github.com/deluan/navidrome/issues/233. I would really love to see this implemented in music streamers such as Airsonic, Subsonic, Navidrome to pass the information (if available in the metadata of the tracks) and for this web player to also use this information when passed to it.

ampcat3 commented 2 years ago

If the replaygain tags already exist in the audio file, you can try using ffmpeg transcoding to "normalize" the volume being streamed by using -af volume=replaygain=track (or -af volume=replaygain=album depending on your preference).

rdhox commented 1 year ago

@ampcat3 Can you explain your answer a little bit more please? I need to use the replayGain info on the client player to equalize the volume on different songs. Is your answer can be use in that case, or your answer is for processing audio file before sending them to the client?

Thank you :)

ampcat3 commented 1 year ago

My response was for the processing of the audio before being sent to the client using the transcoding options in Navidrome. Therefore, I seemed to have misread what the original poster was getting at which was:

I would really love to see this implemented in music streamers such as Airsonic, Subsonic, Navidrome to pass the information (if available in the metadata of the tracks) and for this web player to also use this information when passed to it.

I access my music library through Sonos using bonob - Sonos does not deal with ReplayGain tags so I neede the audio to be processed before being streamed.

Let me know if you have any further questions.

On Jan 6, 2023, at 2:05 AM, Renaud Déchaux @.***> wrote:

@ampcat3 https://github.com/ampcat3 Can you explain your answer a little bit more please? I need to use the replayGain info on the client player to equalize the volume on different songs. Is your answer can be use in that case, or your answer is for processing audio file before sending them to the client?

Thank you :)

— Reply to this email directly, view it on GitHub https://github.com/lijinke666/react-music-player/issues/98#issuecomment-1373424127, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJ2YENDDQAKTGZBG3FJDDTWQ7U5PANCNFSM4MSKOLBQ. You are receiving this because you were mentioned.

rdhox commented 1 year ago

Thank you for your answer, it's clearer now. Like you say Sonos do not handle the ReplayGain tag, and I have some difficulties to find audio players, for mobile or web (html5's audio tag do not handle ReplayGain) to do it. Is the audio always processed before streaming and is ReplayGain never handled by the client?

Thank you!

ampcat3 commented 1 year ago

In the Navidrome Web UI, bonob is listed in the Players page. For the bonob Player, I specify to use the transcoding entry on the Transcoding page that I entitled “mp3 audio”. This transcoding entry uses ffmpeg to process the audio using the ReplayGain tag before sending the stream to the bonob player (the bonob Player is the music source I specify in Sonos). My understanding is that every piece of audio sent to the bonob Player will use the transcoding I specified on the Players page. At least that is how it seems to work for me. For any entry on the Navidrome Players page you can specify a Transcoding entry to use, in which case the transcoding will be applied before being sent to that Player (once again, that is my understanding and seems to be working that way for me).

I don’t have experience with clients other than Sonos with bonob so I don’t know if there are clients that can handle ReplayGain tags. But if your client shows up on the Players page, you should be able to set the Transcoding entry for that client so that the audio is processed before being sent to that client/Player.

On Jan 6, 2023, at 1:57 PM, Renaud Déchaux @.***> wrote:

Thank you for your answer, it's clearer now. Like you say Sonos do not handle the ReplayGain tag, and I have some difficulties to find audio players, for mobile or web (html5's audio tag do not handle ReplayGain) to do it. Is the audio always processed before streaming and is ReplayGain never handled by the client?

Thank you!

— Reply to this email directly, view it on GitHub https://github.com/lijinke666/react-music-player/issues/98#issuecomment-1374181486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXJ2YELQV5LD7R6SKUCPZDTWRCIL3ANCNFSM4MSKOLBQ. You are receiving this because you were mentioned.

rdhox commented 1 year ago

Thank for your answer!