Stop audio that's playing when another audio playback gets started

src/scripts/h5p-dictation-button.js

@@ -16,6 +16,8 @@ class Button {
    * @param {number} params.tries Maximum number of tries before disabling button;
    * @param {string} params.sample Path to sound sample.
    * @param {number} params.type Type of the sample (0 = normal, 1 = slow);
+   * @param {object} params.callbacks Callbacks.
+   * @param {function} params.callbacks.playAudio PlayAudio callback.
    * @param {object} previousState PreviousState.
    */
   constructor(id, params, previousState = {}) {
@@ -33,6 +35,8 @@ class Button {
     this.params.a11y.solution = this.params.a11y.solution || 'Solution';
     this.params.a11y.enterText = this.params.a11y.enterText || 'Enter what you have heard';
     this.params.type = this.params.type || Button.BUTTON_TYPE_NORMAL;
+    this.params.callbacks = this.params.callbacks || {};
+    this.params.callbacks.playAudio = this.params.callbacks.playAudio || (() => {});
 
     this.triesLeft = (typeof previousState.triesLeft !== 'undefined') ? previousState.triesLeft : this.params.maxTries;
 
@@ -104,6 +108,8 @@ class Button {
         }
 
         this.status = Button.STATUS_PLAYING;
+
+        this.params.callbacks.playAudio(this);
       });
 
       // Event Listener Pause
@@ -177,6 +183,15 @@ class Button {
     }
   }
 
+  /**
+   * Pause.
+   */
+  pause() {
+    if (this.status === Button.STATUS_PLAYING) {
+      this.button.click();
+    }
+  }
+
   /**
    * Decrease the number of tries and disable button if necessary.
    */

src/scripts/h5p-dictation-sentence.js

@@ -32,6 +32,9 @@ class Sentence {
     this.maxTriesAlternative = params.triesAlternative;
 
     this.params.sentence.description = (this.params.sentence.description || '').trim();
+    this.params.callbacks = this.params.callbacks || {};
+    this.params.callbacks.playAudio = this.params.callbacks.playAudio || (() => {});
+
     this.solutionText = Util.htmlDecode(params.sentence.text).trim();
     this.solutionText = (!params.ignorePunctuation) ? this.solutionText : this.stripPunctuation(this.solutionText);
     this.containsRTL = (this.params.overrideRTL === 'auto') ?
@@ -61,7 +64,12 @@ class Sentence {
         audioNotSupported: params.audioNotSupported,
         type: Button.BUTTON_TYPE_NORMAL,
         maxTries: params.tries,
-        a11y: params.a11y
+        a11y: params.a11y,
+        callbacks: {
+          playAudio: (button) => {
+            this.params.callbacks.playAudio(button);
+          }
+        }
       },
       previousState.buttonPlayNormal
     );
@@ -76,7 +84,12 @@ class Sentence {
           audioNotSupported: params.audioNotSupported,
           type: Button.BUTTON_TYPE_SLOW,
           maxTries: params.triesAlternative,
-          a11y: params.a11y
+          a11y: params.a11y,
+          callbacks: {
+            playAudio: (button) => {
+              this.params.callbacks.playAudio(button);
+            }
+          }
         },
         previousState.buttonPlaySlow
       );
@@ -279,6 +292,20 @@ class Sentence {
     }
   }
 
+  /**
+   * Pause buttons.
+   * @param {Button} [excludeButton] Button to ignore.
+   */
+  pauseButtons(excludeButton) {
+    if (this.buttonPlayNormal && this.buttonPlayNormal !== excludeButton) {
+      this.buttonPlayNormal.pause();
+    }
+
+    if (this.buttonPlaySlow && this.buttonPlaySlow !== excludeButton) {
+      this.buttonPlaySlow.pause();
+    }
+  }
+
   /**
    * Focus button.
    */

src/scripts/h5p-dictation.js

@@ -132,6 +132,11 @@ class Dictation extends H5P.Question {
             alternateSolution: this.params.behaviour.alternateSolution,
             overrideRTL: this.params.behaviour.overrideRTL,
             autosplit: this.params.behaviour.autosplit,
+            callbacks: {
+              playAudio: (button) => {
+                this.handlePlayAudio(button);
+              }
+            }
           },
           this.contentId,
           previousState)
@@ -229,6 +234,16 @@ class Dictation extends H5P.Question {
       }, false, {}, {});
     };
 
+    /**
+     * Handle playing audio.
+     * @param {Button} button Calling button.
+     */
+    this.handlePlayAudio = (button) => {
+      this.sentences.forEach(sentence => {
+        sentence.pauseButtons(button);
+      });
+    };
+
     /**
      * Show the evaluation for the input in the text input fields.
      */