fix short audio drag to end issue

Author: lhz516

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-h5-audio-player",
-  "version": "3.9.1",
+  "version": "3.9.3",
   "description": "A customizable React audio player. Written in TypeScript. Mobile compatible. Keyboard friendly",
   "main": "./lib/index.js",
   "module": "./es/index.js",

src/ProgressBar.test.js

@@ -47,6 +47,10 @@ describe('ProgressBar', () => {
       get: jest.fn(() => audio.HAVE_ENOUGH_DATA),
     })
 
+    jest.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(() => {
+      audio.currentTime = 0
+    })
+
     const mockMouseEvent = new MouseEvent(null)
     const mockSyntheticEvent = {
       nativeEvent: mockMouseEvent,
@@ -94,8 +98,7 @@ describe('ProgressBar', () => {
     instance.handleAudioTimeUpdate(mockSyntheticEvent)
     expect(wrapper.state('currentTimePos')).toBe('0%')
 
-    // Cover isFinite checking branch in handleWindowMouseOrTouchUp TODO: fix
-    instance.timeOnMouseMove = NaN
+    instance.timeOnMouseMove = 0
     instance.handleWindowMouseOrTouchUp(mockMouseEvent)
     expect(audio.currentTime).toBe(0)
 

src/ProgressBar.tsx

@@ -9,7 +9,7 @@ interface ProgressBarForwardRefProps {
   showFilledProgress: boolean
   srcDuration?: number
   onSeek?: OnSeek
-  onChangeCurrentTimeError?: () => void
+  onChangeCurrentTimeError?: (err: Error) => void
   i18nProgressBar: string
 }
 interface ProgressBarProps extends ProgressBarForwardRefProps {
@@ -140,11 +140,15 @@ class ProgressBar extends Component<ProgressBarProps, ProgressBarState> {
         isDraggingProgress: false,
       }
       if (audio.readyState === audio.HAVE_NOTHING || audio.readyState === audio.HAVE_METADATA || !isFinite(newTime)) {
-        newProps.currentTimePos = '0%'
-        onChangeCurrentTimeError && onChangeCurrentTimeError()
-      } else {
-        audio.currentTime = newTime
+        try {
+          audio.load()
+        } catch (err) {
+          newProps.currentTimePos = '0%'
+          return onChangeCurrentTimeError && onChangeCurrentTimeError(err as Error)
+        }
       }
+
+      audio.currentTime = newTime
       this.setState(newProps)
     }
 

src/index.tsx

@@ -76,7 +76,7 @@ interface PlayerProps {
   onClickPrevious?: (e: React.SyntheticEvent) => void
   onClickNext?: (e: React.SyntheticEvent) => void
   onPlayError?: (err: Error) => void
-  onChangeCurrentTimeError?: () => void
+  onChangeCurrentTimeError?: (err: Error) => void
   mse?: MSEPropsObject
   /**
    * HTML5 Audio tag preload property
@@ -217,6 +217,9 @@ class H5AudioPlayer extends Component<PlayerProps> {
    * Reference: https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
    */
   playAudioPromise = (): void => {
+    if (this.audio.current.error) {
+      this.audio.current.load()
+    }
     const playPromise = this.audio.current.play()
     // playPromise is null in IE 11
     if (playPromise) {
@@ -299,7 +302,11 @@ class H5AudioPlayer extends Component<PlayerProps> {
       !isFinite(duration) ||
       !isFinite(prevTime)
     ) {
-      return this.props.onChangeCurrentTimeError && this.props.onChangeCurrentTimeError()
+      try {
+        audio.load()
+      } catch (err) {
+        return this.props.onChangeCurrentTimeError && this.props.onChangeCurrentTimeError(err as Error)
+      }
     }
     let currentTime = prevTime + time / 1000
     if (currentTime < 0) {
@@ -573,6 +580,11 @@ class H5AudioPlayer extends Component<PlayerProps> {
     }
 
     audio.addEventListener('error', (e) => {
+      const target = e.target as HTMLAudioElement
+      // Calls onEnded when currentTime is the same as duration even if there is an error
+      if (target.error && target.currentTime === target.duration) {
+        return this.props.onEnded && this.props.onEnded(e)
+      }
       this.props.onError && this.props.onError(e)
     })
 

stories/actions.stories.mdx

@@ -29,12 +29,13 @@ Go to `Canvas` tab to see `Actions` logger
       onVolumeChange={action('onVolumeChange')}
       onPause={action('onPause')}
       onPlay={action('onPlay')}
+      onChangeCurrentTimeError={action('onChangeCurrentTimeError')}
       onClickPrevious={action('onClickPrevious')}
       onClickNext={action('onClickNext')}
       volume={0.8}
       showSkipControls
       progressUpdateInterval={100}
-      src={SAMPLE_MP3_URL}
+      src="https://assets.alllq.in/prod/AQ/content/audios/EnglishFluency/U1/A5/6-3-te.mp3"
     />
   </Story>
 </Preview>