check for and resume audio context before triggering sounds

Author: C-Sinclair

assets/js/sound_effect.js

@@ -2,14 +2,18 @@
  * @type {{
  * mounted: () => void,
  * handleEvent: (event: string, callback: (payload: any) => void) => void
+ * audioCtx: AudioContext,
+ * audioCache: Record<string, AudioBuffer>,
  * }}
  */
 export const soundEffectHook = {
   mounted() {
-    console.log("time to hook up the sound effect!");
-
     // Initialize Audio Context
     this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+    // Try to resume AudioContext in case it's suspended
+    this.resumeAudioContext();
+
     // Cache for storing fetched sounds
     this.audioCache = {};
 
@@ -19,8 +23,14 @@ export const soundEffectHook = {
     });
   },
 
+  /**
+   * @param {string} url
+   */
   async playSound(url) {
     try {
+      // Ensure the AudioContext is running
+      await this.resumeAudioContext();
+
       // Use cached sound if available, otherwise fetch, decode, and cache it
       if (!this.audioCache[url]) {
         // Fetch sound file
@@ -45,4 +55,16 @@ export const soundEffectHook = {
     source.connect(this.audioCtx.destination); // Connect to the output (speakers)
     source.start(0); // Play immediately
   },
+
+  /**
+   * Checks for a suspended AudioContext and attempts to resume it
+   */
+  async resumeAudioContext() {
+    if (this.audioCtx.state === "suspended") {
+      // Attempt to resume the AudioContext
+      return this.audioCtx.resume();
+    }
+    // Return a resolved promise for consistency in asynchronous behavior
+    return Promise.resolve();
+  },
 };