ReplayGain support + audio normalization (web player) (#1988)

* ReplayGain support

- extract ReplayGain tags from files, expose via native api
- use metadata to normalize audio in web player

* make pre-push happy

* remove unnecessary prints

* remove another unnecessary print

* add tooltips, see metadata

* address comments, use settings instead

* remove console.log

* use better language for gain modes

ui/src/App.js

@@ -26,6 +26,7 @@ import {
   albumViewReducer,
   activityReducer,
   settingsReducer,
+  replayGainReducer,
   downloadMenuDialogReducer,
 } from './reducers'
 import createAdminStore from './store/createAdminStore'
@@ -59,6 +60,7 @@ const adminStore = createAdminStore({
     listenBrainzTokenDialog: listenBrainzTokenDialogReducer,
     activity: activityReducer,
     settings: settingsReducer,
+    replayGain: replayGainReducer,
   },
 })
 

ui/src/actions/index.js

@@ -2,5 +2,6 @@ export * from './player'
 export * from './themes'
 export * from './albumView'
 export * from './dialogs'
+export * from './replayGain'
 export * from './serverEvents'
 export * from './settings'

ui/src/actions/replayGain.js

@@ -0,0 +1,12 @@
+export const CHANGE_GAIN = 'CHANGE_GAIN'
+export const CHANGE_PREAMP = 'CHANGE_PREAMP'
+
+export const changeGain = (gain) => ({
+  type: CHANGE_GAIN,
+  payload: gain,
+})
+
+export const changePreamp = (preamp) => ({
+  type: CHANGE_PREAMP,
+  payload: preamp,
+})

ui/src/audioplayer/AudioTitle.js

@@ -5,7 +5,7 @@ import clsx from 'clsx'
 import { QualityInfo } from '../common'
 import useStyle from './styles'
 
-const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
+const AudioTitle = React.memo(({ audioInfo, gainInfo, isMobile }) => {
   const classes = useStyle()
   const className = classes.audioTitle
   const isDesktop = useMediaQuery('(min-width:810px)')
@@ -15,7 +15,12 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
   }
 
   const song = audioInfo.song
-  const qi = { suffix: song.suffix, bitRate: song.bitRate }
+  const qi = {
+    suffix: song.suffix,
+    bitRate: song.bitRate,
+    albumGain: song.rgAlbumGain,
+    trackGain: song.rgTrackGain,
+  }
 
   return (
     <Link
@@ -31,7 +36,11 @@ const AudioTitle = React.memo(({ audioInfo, isMobile }) => {
           {song.title}
         </span>
         {isDesktop && (
-          <QualityInfo record={qi} className={classes.qualityInfo} />
+          <QualityInfo
+            record={qi}
+            className={classes.qualityInfo}
+            {...gainInfo}
+          />
         )}
       </span>
       {isMobile ? (

ui/src/audioplayer/Player.js

@@ -24,6 +24,16 @@ import locale from './locale'
 import { keyMap } from '../hotkeys'
 import keyHandlers from './keyHandlers'
 
+function calculateReplayGain(preAmp, gain, peak) {
+  if (gain === undefined || peak === undefined) {
+    return 1
+  }
+
+  // https://wiki.hydrogenaud.io/index.php?title=ReplayGain_1.0_specification&section=19
+  // Normalized to max gain
+  return Math.min(10 ** ((gain + preAmp) / 20), 1 / peak)
+}
+
 const Player = () => {
   const theme = useCurrentTheme()
   const translate = useTranslate()
@@ -50,6 +60,70 @@ const Player = () => {
   const showNotifications = useSelector(
     (state) => state.settings.notifications || false
   )
+  const gainInfo = useSelector((state) => state.replayGain)
+  const [context, setContext] = useState(null)
+  const [gainNode, setGainNode] = useState(null)
+
+  useEffect(() => {
+    if (
+      context === null &&
+      audioInstance &&
+      config.enableReplayGain &&
+      'AudioContext' in window
+    ) {
+      const ctx = new AudioContext()
+      // we need this to support radios in firefox
+      audioInstance.crossOrigin = 'anonymous'
+      const source = ctx.createMediaElementSource(audioInstance)
+      const gain = ctx.createGain()
+
+      source.connect(gain)
+      gain.connect(ctx.destination)
+
+      setContext(ctx)
+      setGainNode(gain)
+    }
+  }, [audioInstance, context])
+
+  useEffect(() => {
+    if (gainNode) {
+      const current = playerState.current || {}
+      const song = current.song || {}
+
+      let numericGain
+
+      switch (gainInfo.gainMode) {
+        case 'album': {
+          numericGain = calculateReplayGain(
+            gainInfo.preAmp,
+            song.rgAlbumGain,
+            song.rgAlbumPeak
+          )
+          break
+        }
+        case 'track': {
+          numericGain = calculateReplayGain(
+            gainInfo.preAmp,
+            song.rgTrackGain,
+            song.rgTrackPeak
+          )
+          break
+        }
+        default: {
+          numericGain = 1
+        }
+      }
+
+      gainNode.gain.setValueAtTime(numericGain, context.currentTime)
+    }
+  }, [
+    audioInstance,
+    context,
+    gainNode,
+    gainInfo.gainMode,
+    gainInfo.preAmp,
+    playerState,
+  ])
 
   const defaultOptions = useMemo(
     () => ({
@@ -75,11 +149,15 @@ const Player = () => {
       },
       volumeFade: { fadeIn: 200, fadeOut: 200 },
       renderAudioTitle: (audioInfo, isMobile) => (
-        <AudioTitle audioInfo={audioInfo} isMobile={isMobile} />
+        <AudioTitle
+          audioInfo={audioInfo}
+          gainInfo={gainInfo}
+          isMobile={isMobile}
+        />
       ),
       locale: locale(translate),
     }),
-    [isDesktop, playerTheme, translate]
+    [gainInfo, isDesktop, playerTheme, translate]
   )
 
   const options = useMemo(() => {
@@ -151,6 +229,12 @@ const Player = () => {
 
   const onAudioPlay = useCallback(
     (info) => {
+      // Do this to start the context; on chrome-based browsers, the context
+      // will start paused since it is created prior to user interaction
+      if (context && context.state !== 'running') {
+        context.resume()
+      }
+
       dispatch(currentPlaying(info))
       if (startTime === null) {
         setStartTime(Date.now())
@@ -178,7 +262,7 @@ const Player = () => {
         }
       }
     },
-    [dispatch, showNotifications, startTime]
+    [context, dispatch, showNotifications, startTime]
   )
 
   const onAudioPlayTrackChange = useCallback(() => {

ui/src/audioplayer/PlayerToolbar.js

@@ -5,8 +5,13 @@ import { LoveButton, useToggleLove } from '../common'
 import { keyMap } from '../hotkeys'
 import config from '../config'
 
-const Placeholder = () =>
-  config.enableFavourites && <LoveButton disabled={true} resource={'song'} />
+const Placeholder = () => (
+  <>
+    {config.enableFavourites && (
+      <LoveButton disabled={true} resource={'song'} />
+    )}
+  </>
+)
 
 const Toolbar = ({ id }) => {
   const { data, loading } = useGetOne('song', id)
@@ -15,6 +20,7 @@ const Toolbar = ({ id }) => {
   const handlers = {
     TOGGLE_LOVE: useCallback(() => toggleLove(), [toggleLove]),
   }
+
   return (
     <>
       <GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />

ui/src/common/QualityInfo.js

@@ -19,7 +19,7 @@ const useStyle = makeStyles(
   }
 )
 
-export const QualityInfo = ({ record, size, className }) => {
+export const QualityInfo = ({ record, size, gainMode, preAmp, className }) => {
   const classes = useStyle()
   let { suffix, bitRate } = record
   let info = placeholder
@@ -32,6 +32,12 @@ export const QualityInfo = ({ record, size, className }) => {
     }
   }
 
+  if (gainMode !== 'none') {
+    info += ` (${
+      (gainMode === 'album' ? record.albumGain : record.trackGain) + preAmp
+    } dB)`
+  }
+
   return (
     <Chip
       className={clsx(classes.chip, className)}
@@ -46,9 +52,11 @@ QualityInfo.propTypes = {
   record: PropTypes.object.isRequired,
   size: PropTypes.string,
   className: PropTypes.string,
+  gainMode: PropTypes.string,
 }
 
 QualityInfo.defaultProps = {
   record: {},
   size: 'small',
+  gainMode: 'none',
 }

ui/src/common/SongInfo.js

@@ -17,15 +17,21 @@ import inflection from 'inflection'
 import { BitrateField, SizeField } from './index'
 import { MultiLineTextField } from './MultiLineTextField'
 import { makeStyles } from '@material-ui/core/styles'
+import config from '../config'
 
 const useStyles = makeStyles({
+  gain: {
+    '&:after': {
+      content: (props) => (props.gain ? " ' db'" : ''),
+    },
+  },
   tableCell: {
     width: '17.5%',
   },
 })
 
 export const SongInfo = (props) => {
-  const classes = useStyles()
+  const classes = useStyles({ gain: config.enableReplayGain })
   const translate = useTranslate()
   const record = useRecordContext(props)
   const data = {
@@ -54,6 +60,15 @@ export const SongInfo = (props) => {
     data.playDate = <DateField record={record} source="playDate" showTime />
   }
 
+  if (config.enableReplayGain) {
+    data.albumGain = (
+      <NumberField source="rgAlbumGain" className={classes.gain} />
+    )
+    data.trackGain = (
+      <NumberField source="rgTrackGain" className={classes.gain} />
+    )
+  }
+
   return (
     <TableContainer>
       <Table aria-label="song details" size="small">

ui/src/config.js

@@ -27,6 +27,7 @@ const defaultConfig = {
   listenBrainzEnabled: true,
   enableCoverAnimation: true,
   devShowArtistPage: true,
+  enableReplayGain: true,
 }
 
 let config

ui/src/i18n/en.json

@@ -363,7 +363,14 @@
                 "defaultView": "Default View",
                 "desktop_notifications": "Desktop Notifications",
                 "lastfmScrobbling": "Scrobble to Last.fm",
-                "listenBrainzScrobbling": "Scrobble to ListenBrainz"
+                "listenBrainzScrobbling": "Scrobble to ListenBrainz",
+                "replaygain": "ReplayGain Mode",
+                "preAmp": "ReplayGain PreAmp (dB)",
+                "gain": {
+                    "none": "Disabled",
+                    "album": "Use Album Gain",
+                    "track": "Use Track Gain"
+                }
             }
         },
         "albumList": "Albums",
@@ -395,6 +402,7 @@
             "singleLoop": "Repeat One",
             "shufflePlay": "Shuffle"
         }
+
     },
     "about": {
         "links": {
@@ -425,4 +433,4 @@
             "toggle_love": "Add this track to favourites"
         }
     }
-}
+}

ui/src/personal/Personal.js

@@ -8,6 +8,7 @@ import { NotificationsToggle } from './NotificationsToggle'
 import { LastfmScrobbleToggle } from './LastfmScrobbleToggle'
 import { ListenBrainzScrobbleToggle } from './ListenBrainzScrobbleToggle'
 import config from '../config'
+import { ReplayGainToggle } from './ReplayGainToggle'
 
 const useStyles = makeStyles({
   root: { marginTop: '1em' },
@@ -24,6 +25,7 @@ const Personal = () => {
         <SelectTheme />
         <SelectLanguage />
         <SelectDefaultView />
+        {config.enableReplayGain && <ReplayGainToggle />}
         <NotificationsToggle />
         {config.lastFMEnabled && <LastfmScrobbleToggle />}
         {config.listenBrainzEnabled && <ListenBrainzScrobbleToggle />}

ui/src/personal/ReplayGainToggle.js

@@ -0,0 +1,44 @@
+import { NumberInput, SelectInput, useTranslate } from 'react-admin'
+import { useDispatch, useSelector } from 'react-redux'
+import { changeGain, changePreamp } from '../actions'
+
+export const ReplayGainToggle = (props) => {
+  const translate = useTranslate()
+  const dispatch = useDispatch()
+  const gainInfo = useSelector((state) => state.replayGain)
+
+  return (
+    <>
+      <SelectInput
+        {...props}
+        fullWidth
+        source="replayGain"
+        label={translate('menu.personal.options.replaygain')}
+        choices={[
+          { id: 'none', name: 'menu.personal.options.gain.none' },
+          { id: 'track', name: 'menu.personal.options.gain.album' },
+          { id: 'album', name: 'menu.personal.options.gain.track' },
+        ]}
+        defaultValue={gainInfo.gainMode}
+        onChange={(event) => {
+          dispatch(changeGain(event.target.value))
+        }}
+      />
+      <br />
+      {gainInfo.gainMode !== 'none' && (
+        <NumberInput
+          {...props}
+          source="preAmp"
+          label={translate('menu.personal.options.preAmp')}
+          defaultValue={gainInfo.preAmp}
+          step={0.5}
+          min={-15}
+          max={15}
+          onChange={(event) => {
+            dispatch(changePreamp(event.target.value))
+          }}
+        />
+      )}
+    </>
+  )
+}

ui/src/reducers/index.js

@@ -4,3 +4,4 @@ export * from './playerReducer'
 export * from './albumView'
 export * from './activityReducer'
 export * from './settingsReducer'
+export * from './replayGainReducer'

ui/src/reducers/replayGainReducer.js

@@ -0,0 +1,45 @@
+import { CHANGE_GAIN, CHANGE_PREAMP } from '../actions'
+
+const getPreAmp = () => {
+  const storage = localStorage.getItem('preamp')
+
+  if (storage === null) {
+    return 0
+  } else {
+    const asFloat = parseFloat(storage)
+    return isNaN(asFloat) ? 0 : asFloat
+  }
+}
+
+const initialState = {
+  gainMode: localStorage.getItem('gainMode') || 'none',
+  preAmp: getPreAmp(),
+}
+
+export const replayGainReducer = (
+  previousState = initialState,
+  { type, payload }
+) => {
+  switch (type) {
+    case CHANGE_GAIN: {
+      localStorage.setItem('gainMode', payload)
+      return {
+        ...previousState,
+        gainMode: payload,
+      }
+    }
+    case CHANGE_PREAMP: {
+      const value = parseFloat(payload)
+      if (isNaN(value)) {
+        return previousState
+      }
+      localStorage.setItem('preAmp', payload)
+      return {
+        ...previousState,
+        preAmp: value,
+      }
+    }
+    default:
+      return previousState
+  }
+}