From d3e79396595f675798af5be8be56efbfd2737ba0 Mon Sep 17 00:00:00 2001
From: TimJentzsch <commits@timjen.net>
Date: Wed, 29 Jan 2025 22:42:24 +0100
Subject: [PATCH] Fix audio context not restarting automatically (#249)

# Objective

The script for restarting the audio context for web apps didn't work.
This resulted in the app not getting any audio.

# Solution

The fix is simple: The script for restarting the audio context needs to
be called _before_ the app is loaded, I assume to ensure that the
creation of the audio context is tracked correctly.

# Testing

You can test it on the current prototype of the [`bevy_new_2d`
port](https://github.com/TheBevyFlock/bevy_new_2d/pull/312).

Compare `bevy run --no-default-features web --open` with the current
`main` and this branch.
This branch should have sound when you click the buttons.
---
 assets/web/index.html | 83 ++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/assets/web/index.html b/assets/web/index.html
index b7de1fc0..b3f61654 100644
--- a/assets/web/index.html
+++ b/assets/web/index.html
@@ -64,47 +64,8 @@
     </div>
 
     <script type="module">
-      // Starting the game
-      // The template uses `bevy_app.js`, which will be replaced by the name of the generated JS entrypoint when creating the local web server
-      import init from "./build/bevy_app.js";
-      init().catch((error) => {
-        if (
-          !error.message.startsWith(
-            "Using exceptions for control flow, don't mind me. This isn't actually an error!"
-          )
-        ) {
-          throw error;
-        }
-      });
-    </script>
-
-    <script type="module">
-      // Hide loading screen when the game starts.
-      const loading_screen = document.getElementById("loading-screen");
-      const observer = new MutationObserver((records) => {
-        for (const record of records) {
-          for (const addedNode of record.addedNodes) {
-            if (addedNode instanceof HTMLCanvasElement) {
-              // A new canvas has been created, which means that the game has been loaded
-              // Hide the loading screen!
-              loading_screen.style.display = "none";
-              observer.disconnect();
-              return;
-            }
-          }
-        }
-      });
-
-      observer.observe(document.body, {
-        subtree: false,
-        childList: true,
-        attributes: false,
-        characterData: false,
-      });
-    </script>
-
-    <script type="module">
-      // Script to restart the audio context
+      // Automatically restart the audio context after user interaction
+      // Needs to be executed _before_ the game is loaded
       // Taken from https://developer.chrome.com/blog/web-audio-autoplay/#moving-forward
       (function () {
         // An array of all contexts to resume on the page
@@ -163,5 +124,45 @@
         });
       })();
     </script>
+
+    <script type="module">
+      // Starting the game
+      // The template uses `bevy_app.js`, which will be replaced by the name of the generated JS entrypoint when creating the local web server
+      import init from "./build/bevy_app.js";
+      init().catch((error) => {
+        if (
+          !error.message.startsWith(
+            "Using exceptions for control flow, don't mind me. This isn't actually an error!"
+          )
+        ) {
+          throw error;
+        }
+      });
+    </script>
+
+    <script type="module">
+      // Hide loading screen when the game starts.
+      const loading_screen = document.getElementById("loading-screen");
+      const observer = new MutationObserver((records) => {
+        for (const record of records) {
+          for (const addedNode of record.addedNodes) {
+            if (addedNode instanceof HTMLCanvasElement) {
+              // A new canvas has been created, which means that the game has been loaded
+              // Hide the loading screen!
+              loading_screen.style.display = "none";
+              observer.disconnect();
+              return;
+            }
+          }
+        }
+      });
+
+      observer.observe(document.body, {
+        subtree: false,
+        childList: true,
+        attributes: false,
+        characterData: false,
+      });
+    </script>
   </body>
 </html>