diff --git a/card.js b/card.js index 9919018..81e9219 100644 --- a/card.js +++ b/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 diff --git a/memory-game.js b/memory-game.js index 07bbd0d..bf19a3e 100644 --- a/memory-game.js +++ b/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