Fix audio context not restarting automatically

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>