separate UI play/pause with audio

DIYgod · DIYgod · commit 5c9456b65076 · 2018-03-20T14:33:42.000+08:00
diff --git a/src/js/player.js b/src/js/player.js
@@ -113,13 +113,13 @@ class APlayer {
 
         this.on('play', () => {
             if (this.paused) {
-                this.play();
+                this.setUIPlaying();
             }
         });
 
         this.on('pause', () => {
             if (!this.paused) {
-                this.pause();
+                this.setUIPaused();
             }
         });
 
@@ -302,7 +302,7 @@ class APlayer {
         this.template.ptime.innerHTML = utils.secondToTime(time);
     }
 
-    play () {
+    setUIPlaying () {
         if (this.paused) {
             this.paused = false;
             this.template.button.classList.remove('aplayer-play');
@@ -313,15 +313,6 @@ class APlayer {
             }, 100);
         }
 
-        const playPromise = this.audio.play();
-        if (playPromise) {
-            playPromise.catch((e) => {
-                if (e.name === 'NotAllowedError') {
-                    this.pause();
-                }
-            });
-        }
-
         this.timer.enable('loading');
 
         if (this.options.mutex) {
@@ -333,7 +324,22 @@ class APlayer {
         }
     }
 
-    pause () {
+    play () {
+        this.setUIPlaying();
+
+        const playPromise = this.audio.play();
+        if (playPromise) {
+            playPromise.catch((e) => {
+                console.error(e);
+                if (e.name === 'NotAllowedError' ||
+                    e.name === 'NotSupportedError') {
+                    this.setUIPaused();
+                }
+            });
+        }
+    }
+
+    setUIPaused () {
         if (!this.paused) {
             this.paused = true;
 
@@ -345,12 +351,15 @@ class APlayer {
             }, 100);
         }
 
-        this.audio.pause();
-
         this.container.classList.remove('aplayer-loading');
         this.timer.disable('loading');
     }
 
+    pause () {
+        this.setUIPaused();
+        this.audio.pause();
+    }
+
     switchVolumeIcon () {
         if (this.volume() >= 0.95) {
             this.template.volumeButton.innerHTML = Icons.volumeUp;
