html5 play/pause events

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

dist/howler.js

@@ -2243,6 +2243,16 @@
         self._loadFn = self._loadListener.bind(self);
         self._node.addEventListener(Howler._canPlayEvent, self._loadFn, false);
 
+        // Listen for 'play' event to let us know when sound is played.
+        // This can be triggered externally by media keys (eg. TouchBar on MacOs for instance)
+        self._playFn = self._playListener.bind(self);
+        self._node.addEventListener('play', self._playFn, false);
+
+        // Listen for 'pause' event to let us know when sound is paused.
+        // This can be triggered externally by media keys (eg. TouchBar on MacOs for instance)
+        self._pauseFn = self._pauseListener.bind(self);
+        self._node.addEventListener('pause', self._pauseFn, false);
+
         // Listen for the 'ended' event on the sound to account for edge-case where
         // a finite sound has a duration of Infinity.
         self._endFn = self._endListener.bind(self);
@@ -2323,6 +2333,24 @@
       self._node.removeEventListener(Howler._canPlayEvent, self._loadFn, false);
     },
 
+    /**
+     * HTML5 Audio play listener callback
+     * Sound is already played/paused so just update state and notify
+     */
+    _playListener: function() {
+      this._paused = false;
+      this._parent._emit('play', this._id);
+    },
+
+    /**
+     * HTML5 Audio pause listener callback.
+     * Sound is already played/paused so just update state and notify
+     */
+    _pauseListener: function() {
+      this._paused = true;
+      this._parent._emit('pause', this._id);
+    },
+
     /**
      * HTML5 Audio ended listener callback.
      */

examples/player/player.js

@@ -67,6 +67,7 @@ Player.prototype = {
           // Start the wave animation if we have already loaded
           wave.container.style.display = 'block';
           bar.style.display = 'none';
+          playBtn.style.display = 'none';
           pauseBtn.style.display = 'block';
         },
         onload: function() {
@@ -85,6 +86,8 @@ Player.prototype = {
           // Stop the wave animation.
           wave.container.style.display = 'none';
           bar.style.display = 'block';
+          playBtn.style.display = 'block';
+          pauseBtn.style.display = 'none';
         },
         onstop: function() {
           // Stop the wave animation.
@@ -130,9 +133,6 @@ Player.prototype = {
     // Puase the sound.
     sound.pause();
 
-    // Show the play button.
-    playBtn.style.display = 'block';
-    pauseBtn.style.display = 'none';
   },
 
   /**

src/howler.core.js

@@ -2243,6 +2243,16 @@
         self._loadFn = self._loadListener.bind(self);
         self._node.addEventListener(Howler._canPlayEvent, self._loadFn, false);
 
+        // Listen for 'play' event to let us know when sound is played.
+        // This can be triggered externally by media keys (eg. TouchBar on MacOs for instance)
+        self._playFn = self._playListener.bind(self);
+        self._node.addEventListener('play', self._playFn, false);
+
+        // Listen for 'pause' event to let us know when sound is paused.
+        // This can be triggered externally by media keys (eg. TouchBar on MacOs for instance)
+        self._pauseFn = self._pauseListener.bind(self);
+        self._node.addEventListener('pause', self._pauseFn, false);
+
         // Listen for the 'ended' event on the sound to account for edge-case where
         // a finite sound has a duration of Infinity.
         self._endFn = self._endListener.bind(self);
@@ -2323,6 +2333,24 @@
       self._node.removeEventListener(Howler._canPlayEvent, self._loadFn, false);
     },
 
+    /**
+     * HTML5 Audio play listener callback
+     * Sound is already played/paused so just update state and notify
+     */
+    _playListener: function() {
+      this._paused = false;
+      this._parent._emit('play', this._id);
+    },
+
+    /**
+     * HTML5 Audio pause listener callback.
+     * Sound is already played/paused so just update state and notify
+     */
+    _pauseListener: function() {
+      this._paused = true;
+      this._parent._emit('pause', this._id);
+    },
+
     /**
      * HTML5 Audio ended listener callback.
      */