html5 play/pause events

goldfire#1475

src/howler.core.js

@@ -2267,6 +2267,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);
@@ -2347,6 +2357,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.
      */