HFP-1145 Stop audio when turning another card

card.js

@@ -66,11 +66,13 @@
         var handlePlaying = function () {
           if ($card) {
             $card.addClass('h5p-memory-audio-playing');
+            self.trigger('audioplay');
           }
         };
         var handleStopping = function () {
           if ($card) {
             $card.removeClass('h5p-memory-audio-playing');
+            self.trigger('audiostop');
           }
         };
         audioPlayer.addEventListener('play', handlePlaying);
@@ -115,24 +117,20 @@
         return;
       }
 
-      if (audioPlayer) {
-        audioPlayer.play();
-      }
-
       $card.addClass('h5p-flipped');
       self.trigger('flip');
       flippedState = true;
+
+      if (audioPlayer) {
+        audioPlayer.play();
+      }
     };
 
     /**
      * Flip card back.
      */
     self.flipBack = function () {
-      if (audioPlayer) {
-        audioPlayer.pause();
-        audioPlayer.currentTime = 0;
-      }
-
+      self.stopAudio();
       self.updateLabel(null, null, true); // Reset card label
       $card.removeClass('h5p-flipped');
       flippedState = false;
@@ -150,11 +148,7 @@
      * Reset card to natural state
      */
     self.reset = function () {
-      if (audioPlayer) {
-        audioPlayer.pause();
-        audioPlayer.currentTime = 0;
-      }
-
+      self.stopAudio();
       self.updateLabel(null, null, true); // Reset card label
       flippedState = false;
       removedState = false;
@@ -236,8 +230,7 @@
         $card.children('.h5p-back')
           .click(function () {
             if ($card.hasClass('h5p-memory-audio-playing')) {
-              audioPlayer.pause();
-              audioPlayer.currentTime = 0;
+              self.stopAudio();
             }
             else {
               audioPlayer.play();
@@ -289,6 +282,16 @@
     self.isRemoved = function () {
       return removedState;
     };
+
+    /**
+     * Stop any audio track that might be playing.
+     */
+    self.stopAudio = function () {
+      if (audioPlayer) {
+        audioPlayer.pause();
+        audioPlayer.currentTime = 0;
+      }
+    };
   };
 
   // Extends the event dispatcher

memory-game.js

@@ -22,7 +22,7 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
     // Initialize event inheritance
     EventDispatcher.call(self);
 
-    var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols;
+    var flipped, timer, counter, popup, $bottom, $taskComplete, $feedback, $wrapper, maxWidth, numCols, audioCard;
     var cards = [];
     var flipBacks = []; // Que of cards to be flipped back
     var numFlipped = 0;
@@ -218,6 +218,9 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
      */
     var addCard = function (card, mate) {
       card.on('flip', function () {
+        if (audioCard) {
+          audioCard.stopAudio();
+        }
 
         // Always return focus to the card last flipped
         for (var i = 0; i < cards.length; i++) {
@@ -260,6 +263,12 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
         // Count number of cards turned
         counter.increment();
       });
+      card.on('audioplay', function () {
+        audioCard = card;
+      });
+      card.on('audiostop', function () {
+        audioCard = undefined;
+      });
 
       /**
        * Create event handler for moving focus to the next or the previous