fix: remove stalled event handler and use async .play()

lijinke666 · Feb 12, 2021 · 2c7c1eb · 2c7c1eb
1 parent 356366f
commit 2c7c1eb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/index.js b/src/index.js
@@ -864,7 +864,8 @@ export default class ReactJkMusicPlayer extends PureComponent {
       this.setState({ playing: !playing })
       if (!playing) {
         if (canPlay) {
-          return this.audio.play()
+          this.play()
+          return
         }
         return loadAudio(musicSrc)
       }
@@ -1397,7 +1398,7 @@ export default class ReactJkMusicPlayer extends PureComponent {
         },
         () => {
           if (canPlay) {
-            this.audio.play()
+            this.play()
           }
           this.setState({
             isInitAutoPlay: true,
@@ -1736,11 +1737,24 @@ export default class ReactJkMusicPlayer extends PureComponent {
     )
   }
 
+  play = () => {
+    // https://developers.google.com/web/updates/2017/06/play-request-was-interrupted
+    const playPromise = this.audio.play()
+    if (playPromise && playPromise.then) {
+      playPromise
+        .then(() => {
+          this.setState({ loading: false, playing: true })
+        })
+        .catch(() => {
+          this.setState({ loading: false, playing: false })
+        })
+    }
+  }
+
   mockAutoPlayForMobile = () => {
     if (this.props.autoPlay && !this.state.playing) {
       this.audio.load()
-      this.audio.pause()
-      this.audio.play()
+      this.play()
     }
   }
 
@@ -1786,7 +1800,6 @@ export default class ReactJkMusicPlayer extends PureComponent {
       play: this.onAudioPlay,
       timeupdate: this.audioTimeUpdate,
       volumechange: this.onAudioVolumeChange,
-      stalled: this.onAudioError, // 当浏览器尝试获取媒体数据，但数据不可用时
       abort: this.onAudioAbort,
       progress: this.onSetAudioLoadedProgress,
     },

diff --git a/src/styles/mixins.less b/src/styles/mixins.less
@@ -49,9 +49,6 @@
 
 .overwrite-progress-bar() {
   .rc-slider {
-    @media @mobile {
-      margin: 0 5px;
-    }
     &-rail {
       background-color: @base-color;
     }

diff --git a/src/styles/playerMobile.less b/src/styles/playerMobile.less
@@ -142,6 +142,7 @@
     .cover {
       width: 100%;
       animation: imgRotate 30s linear infinite;
+      object-fit: cover;
     }
   }
   &-progress {