From 8a1f19ec57bbc2fcf44278643200634de5d88f07 Mon Sep 17 00:00:00 2001
From: Eric Robinson <eric@sonicbloomgames.com>
Date: Tue, 12 Dec 2017 16:38:41 -0500
Subject: [PATCH] Duplicate pause event logic into the abort event

It appears that the "pause" event is never triggered if you call `audio.pause()` on a playing audio element and then immediately set `audio.src`. The "abort" event, however, _is_ called in this case.

Because the "pause" event isn't raised, the APlayer code that resets the pause button state doesn't trigger. This leaves the APlayer in a state where the pause button is still showing but the audio element _isn't_ actually playing. Because `APlayer.toggle()` (which is called by the Play/Pause button) does not check the state of the audio element, and instead checks the state of the UI, we end up in a situation where the pause button is visible but we're not playing. The call to Toggle, then, calls `APlayer.pause()` which checks to see if it's already paused or not. Because the audio element is already paused, the call is ignored and the event never triggers (which would reset the button UI).

This [temporary] "fix" resolves the issue by intercepting the "abort" event that is triggered when the "pause" event is aborted. It then runs the same logic as the "pause" event, checking to see if the playback button is in a "paused" state and, if so, resetting it to a "play" button state.

_In theory_, the checks at the beginning of the `pauseHandler` arrow function should be enough to safeguard any other unrelated calls to "abort".
---
 src/APlayer.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/APlayer.js b/src/APlayer.js
index 47712ca..bb2c924 100644
--- a/src/APlayer.js
+++ b/src/APlayer.js
@@ -525,7 +525,7 @@ class APlayer {
                 }
             });
 
-            this.audio.addEventListener('pause', () => {
+            let pauseHandler = () => {
                 if (this.button && (this.button.classList.contains('aplayer-pause') || this.ended)) {
                     this.ended = false;
                     this.button.classList.remove('aplayer-pause');
@@ -540,7 +540,11 @@ class APlayer {
                     clearInterval(this.playedTime);
                     this.trigger('pause');
                 }
-            });
+            };
+
+            this.audio.addEventListener('pause', pauseHandler);
+
+            this.audio.addEventListener('abort', pauseHandler);
 
             // show audio time: the metadata has loaded or changed
             this.audio.addEventListener('durationchange', () => {