Use non-linear volume slider

__tests__/tests/player.test.js

@@ -1689,4 +1689,46 @@ describe('<ReactJkMusicPlayer/>', () => {
     expect(audio.volume).toStrictEqual(0.5)
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  it('should set audio volume non-linearly', async () => {
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[
+          { musicSrc: 'x', cover: '' },
+          { musicSrc: 'xx', cover: '' },
+        ]}
+        mode="full"
+      />,
+    )
+    expect(wrapper.state('currentAudioVolume')).toStrictEqual(1)
+    expect(wrapper.instance().audio.volume).toStrictEqual(1)
+
+    wrapper.instance().setAudioVolume(0.5)
+
+    expect(wrapper.state('currentAudioVolume')).toStrictEqual(0.5)
+    expect(wrapper.instance().audio.volume).toStrictEqual(0.25)
+  })
+
+  it('should set volume slider value non-linearly and invoke onAudioVolumeChange', async () => {
+    const fn = jest.fn()
+    const wrapper = mount(
+      <ReactJkMusicPlayer
+        audioLists={[
+          { musicSrc: 'x', cover: '' },
+          { musicSrc: 'xx', cover: '' },
+        ]}
+        mode="full"
+        onAudioVolumeChange={fn}
+      />,
+    )
+    expect(wrapper.state('soundValue')).toStrictEqual(1)
+    expect(wrapper.instance().audio.volume).toStrictEqual(1)
+
+    wrapper.instance().audio.volume = 0.25
+    wrapper.instance().onAudioVolumeChange()
+
+    expect(fn).toHaveBeenCalledWith(0.25)
+    expect(wrapper.instance().audio.volume).toStrictEqual(0.25)
+    expect(wrapper.state('soundValue')).toStrictEqual(0.5)
+  })
 })

src/components/PlayerMobile.js

@@ -30,6 +30,7 @@ const PlayerMobile = ({
   locale,
   toggleMode,
   renderAudioTitle,
+  actionButtonIcon,
 }) => (
   <div className={cls(prefix, { 'default-bg': !glassBg, 'glass-bg': glassBg })}>
     <PlayModeTip
@@ -90,7 +91,7 @@ const PlayerMobile = ({
           title={playing ? locale.clickToPauseText : locale.clickToPlayText}
           onClick={onPlay}
         >
-          {playing ? icon.pause : icon.play}
+          {actionButtonIcon}
         </span>
       )}
       <span

src/index.js

@@ -512,6 +512,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
             locale={locale}
             toggleMode={toggleMode}
             renderAudioTitle={this.renderAudioTitle}
+            actionButtonIcon={actionButtonIcon}
           />
         )}
 
@@ -1042,17 +1043,17 @@ export default class ReactJkMusicPlayer extends PureComponent {
     this.setAudioVolume(currentAudioVolume || 0.1)
   }
 
-  setAudioVolume = (value) => {
-    this.audio.volume = value
+  setAudioVolume = (volumeBarValue) => {
+    this.audio.volume = this.getListeningVolume(volumeBarValue)
     this.setState({
-      currentAudioVolume: value,
-      soundValue: value,
+      currentAudioVolume: volumeBarValue,
+      soundValue: volumeBarValue,
     })
 
     // Update fade-in interval to transition to new volume
     if (this.state.currentVolumeFade === VOLUME_FADE.IN) {
       this.state.updateIntervalEndVolume &&
-        this.state.updateIntervalEndVolume(value)
+        this.state.updateIntervalEndVolume(volumeBarValue)
     }
   }
 
@@ -1069,6 +1070,14 @@ export default class ReactJkMusicPlayer extends PureComponent {
     }
   }
 
+  getListeningVolume = (volumeBarValue) => {
+    return volumeBarValue ** 2
+  }
+
+  getVolumeBarValue = (listeningVolume) => {
+    return Math.sqrt(listeningVolume)
+  }
+
   onAudioReload = () => {
     if (this.props.audioLists.length) {
       this.handlePlay(PLAY_MODE.singleLoop)
@@ -1248,7 +1257,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               updateIntervalEndVolume: undefined,
             })
             // It's possible that the volume level in the UI has changed since beginning of fade
-            this.audio.volume = this.state.soundValue
+            this.audio.volume = this.getListeningVolume(this.state.soundValue)
           },
         )
 
@@ -1259,7 +1268,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
       } else {
         this.setState({ currentVolumeFade: VOLUME_FADE.IN })
         const startVolume = isCurrentlyFading ? this.audio.volume : 0
-        const endVolume = this.state.soundValue
+        const endVolume = this.getListeningVolume(this.state.soundValue)
         // Always fade in from 0 to current volume
         const {
           fadeInterval: fadeInInterval,
@@ -1269,7 +1278,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
           startVolume,
           endVolume,
           {
-            // If starting track from beginning, start immediately without fade-in
             duration: fadeIn,
           },
           () => {
@@ -1278,7 +1286,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
               currentVolumeFadeInterval: undefined,
               updateIntervalEndVolume: undefined,
             })
-            this.audio.volume = this.state.soundValue
+            this.audio.volume = this.getListeningVolume(this.state.soundValue)
           },
         )
 
@@ -1533,11 +1541,12 @@ export default class ReactJkMusicPlayer extends PureComponent {
     if (currentVolumeFade !== VOLUME_FADE.NONE) {
       return
     }
+    const volumeBarValue = this.getVolumeBarValue(volume)
     this.setState({
-      soundValue: volume,
+      soundValue: volumeBarValue,
     })
     if (this.props.onAudioVolumeChange) {
-      const formattedVolume = parseFloat(volume.toFixed(2))
+      const formattedVolume = parseFloat(volume.toFixed(4))
       this.props.onAudioVolumeChange(formattedVolume)
     }
   }