Turn mp4 video into webp and mp3

app.js

@@ -15,12 +15,11 @@ var Module = {
 
 document.addEventListener('DOMContentLoaded', function () {
     // --- Elements ---
-    const video = document.getElementById('install-video');
+    const audio = document.getElementById('install-audio');
     const soundToggleEmoji = document.getElementById('sound-toggle-emoji');
     const mainContainer = document.getElementById('main-container');
     const topContent = document.getElementById('top-content');
     const controlsWrapper = document.getElementById('controls-wrapper');
-    const footer = document.querySelector('.footer-disclaimer');
     const allPages = document.querySelectorAll('.page-content');
     const pageButtons = document.querySelectorAll('[data-target]');
     const backButtons = document.querySelectorAll('.page-back-button');
@@ -31,17 +30,22 @@ document.addEventListener('DOMContentLoaded', function () {
 
     // --- Sound Toggle ---
     function updateSoundEmojiState() {
-        soundToggleEmoji.textContent = video.muted ? '🔇' : '🔊';
-        soundToggleEmoji.title = video.muted ? 'Unmute Audio' : 'Mute Audio';
+        soundToggleEmoji.textContent = audio.muted ? '🔇' : '🔊';
+        soundToggleEmoji.title = audio.muted ? 'Unmute Audio' : 'Mute Audio';
     }
 
-    if (video && soundToggleEmoji) {
+    if (audio && soundToggleEmoji) {
         updateSoundEmojiState();
         soundToggleEmoji.addEventListener('click', function () {
-            video.muted = !video.muted;
+            audio.muted = !audio.muted;
+            if (!audio.muted) {
+                audio.currentTime = 0;
+                audio.play();
+            }
+
             updateSoundEmojiState();
         });
-        video.addEventListener('volumechange', updateSoundEmojiState);
+        audio.addEventListener('volumechange', updateSoundEmojiState);
     }
 
     // --- Control Image Hover ---
@@ -64,7 +68,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     runGameButton.addEventListener('click', function () {
         if (!Module.running) return;
-        video.muted = true;
+        audio.muted = true;
         updateSoundEmojiState();
         this.src = this.dataset.on;
 

index.html

@@ -10,6 +10,7 @@
     <link rel="preload" href="app.js" as="script">
     <link rel="preload" href="isle.js" as="script">
     <link rel="preload" href="isle.wasm" as="fetch" crossorigin>
+    <link rel="preload" href="install.webp" as="image">
     <link rel="preload" href="island.webp" as="image">
 
     <meta name="description"
@@ -41,10 +42,11 @@
     <div id="main-container">
         <div id="top-content">
             <div class="video-container">
-                <video id="install-video" width="260" height="260" autoplay loop playsinline muted>
-                    <source src="install.mp4" type="video/mp4">
-                    Your browser does not support the video tag.
-                </video>
+                <img id="install-video" width="260" height="260" src="install.webp" alt="Install Game">
+                <audio id="install-audio" loop muted preload="none">
+                    <source src="install.mp3" type="audio/mpeg">
+                    Your browser does not support the audio tag.
+                </audio>
                 <span id="sound-toggle-emoji" title="Unmute Audio">🔇</span>
             </div>
             <img id="island-logo-img" width="567" height="198" src="island.webp" alt="Lego Island Logo">

sw.js

@@ -15,7 +15,8 @@ const coreAppFiles = [
     '/free_stuff_off.webp', '/free_stuff_on.webp', '/install_off.webp', '/install_on.webp',
     '/island.webp', '/isle.js', '/isle.wasm', '/poster.pdf', '/read_me_off.webp',
     '/read_me_on.webp', '/run_game_off.webp', '/run_game_on.webp', '/shark.webp',
-    '/uninstall_off.webp', '/uninstall_on.webp', '/app.js', '/style.css', '/manifest.json'
+    '/uninstall_off.webp', '/uninstall_on.webp', '/app.js', '/style.css', '/manifest.json',
+    '/install.webp', '/install.mp3'
 ];
 
 const gameFiles = [
@@ -35,14 +36,7 @@ const STATIC_CACHE_NAME = 'static-assets-v1';
 self.addEventListener('install', (event) => {
     event.waitUntil(
         caches.open(STATIC_CACHE_NAME).then((cache) => {
-            return cache.addAll(coreAppFiles).then(() => {
-                return fetch('/install.mp4', { cache: 'reload' }).then((response) => {
-                    if (!response.ok) {
-                        throw new Error('Video fetch failed!');
-                    }
-                    return cache.put('/install.mp4', response);
-                });
-            });
+            return cache.addAll(coreAppFiles);
         })
     );
     self.skipWaiting();