diff --git a/.gitignore b/.gitignore
index fdd8195..a427f83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,6 @@
 /target
 /.todo
+
+/wasm/bevy_game.js
+/wasm/bevy_game_bg.wasm
+/wasm/assets
diff --git a/wasm/index.html b/wasm/index.html
new file mode 100644
index 0000000..58b24d2
--- /dev/null
+++ b/wasm/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  html,
+  body {
+    height: 100%;
+    background-color: black;
+  }
+
+  #loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  #loading>span {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  canvas {
+    display: block;
+  }
+</style>
+
+<body>
+  <div id="loading">
+    <span></span>
+  </div>
+
+  <script type="module">
+    import './restart-audio-context.js'
+    import init from './bevy_game.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;
+      }
+    });
+
+    const observer = new MutationObserver(() => {
+      if (Array.from(document.body.children).some((child) => child.tagName === 'CANVAS')) {
+        document.getElementById('loading').remove();
+        observer.disconnect();
+      }
+    });
+    observer.observe(document.body, { childList: true });
+  </script>
+</body>
+
+</html>
diff --git a/wasm/restart-audio-context.js b/wasm/restart-audio-context.js
new file mode 100644
index 0000000..69d9e4b
--- /dev/null
+++ b/wasm/restart-audio-context.js
@@ -0,0 +1,57 @@
+// taken from https://developer.chrome.com/blog/web-audio-autoplay/#moving-forward
+(function () {
+    // An array of all contexts to resume on the page
+    const audioContextList = [];
+
+    // An array of various user interaction events we should listen for
+    const userInputEventNames = [
+        'click',
+        'contextmenu',
+        'auxclick',
+        'dblclick',
+        'mousedown',
+        'mouseup',
+        'pointerup',
+        'touchend',
+        'keydown',
+        'keyup',
+    ];
+
+    // A proxy object to intercept AudioContexts and
+    // add them to the array for tracking and resuming later
+    self.AudioContext = new Proxy(self.AudioContext, {
+        construct(target, args) {
+            const result = new target(...args);
+            audioContextList.push(result);
+            return result;
+        },
+    });
+
+    // To resume all AudioContexts being tracked
+    function resumeAllContexts(event) {
+        let count = 0;
+
+        audioContextList.forEach(context => {
+            if (context.state !== 'running') {
+                context.resume();
+            } else {
+                count++;
+            }
+        });
+
+        // If all the AudioContexts have now resumed then we
+        // unbind all the event listeners from the page to prevent
+        // unnecessary resume attempts
+        if (count == audioContextList.length) {
+            userInputEventNames.forEach(eventName => {
+                document.removeEventListener(eventName, resumeAllContexts);
+            });
+        }
+    }
+
+    // We bind the resume function for each user interaction
+    // event on the page
+    userInputEventNames.forEach(eventName => {
+        document.addEventListener(eventName, resumeAllContexts);
+    });
+})();
