add sound to interact screen

konekowo · Mar 21, 2024 · 964087f · 964087f
1 parent 95015e7
commit 964087f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 31 deletions.
diff --git a/src/Screens/InteractScreen/InteractScreen.ts b/src/Screens/InteractScreen/InteractScreen.ts
@@ -10,12 +10,14 @@ export class InteractScreen extends Screen {
     private readonly text: PIXI.Text;
 
     private readonly introTrack: Blob;
+    private readonly clickSound: Blob;
 
     private readonly clickArea: PIXI.Graphics = new PIXI.Graphics();
 
-    public constructor(introTrack: Blob) {
+    public constructor(introTrack: Blob, clickSound: Blob) {
         super();
         this.introTrack = introTrack;
+        this.clickSound = clickSound;
         this.text = new PIXI.Text({
             text: "Click anywhere to play!",
             style: {
@@ -42,11 +44,20 @@ export class InteractScreen extends Screen {
 
         this.clickArea.eventMode = "static";
         this.clickArea.cursor = "pointer";
-        this.clickArea.onclick = () => {
+
+        const clicked = () => {
+            let clickSoundUrl = URL.createObjectURL(this.clickSound);
+            let clickSoundAudio = new Audio(clickSoundUrl);
+            clickSoundAudio.play();
             Main.switchScreen(new IntroScreen(this.introTrack));
         }
+
+        this.clickArea.onclick = () => {
+            clicked();
+
+        }
         this.clickArea.ontap = () => {
-            Main.switchScreen(new IntroScreen(this.introTrack));
+            clicked();
         }
         ease.add(this.text, {alpha: 1, scale: 1}, {duration: 300, ease: "easeInOutQuad"});
     }

diff --git a/src/Screens/IntroScreen/IntroScreen.ts b/src/Screens/IntroScreen/IntroScreen.ts
@@ -44,8 +44,10 @@ export class IntroScreen extends Screen {
                     entry.blob().then((audioBlob) => {
                         let audioUrl = URL.createObjectURL(audioBlob);
                         Main.currentPlayingAudio = new Audio(audioUrl);
-                        Main.currentPlayingAudio.play();
-                        this.afterAudioPlay();
+                        Main.currentPlayingAudio.play().then(() => {
+                            this.afterAudioPlay();
+                        });
+
 
                     });
                 }

diff --git a/src/main.ts b/src/main.ts
@@ -29,35 +29,33 @@ export class Main {
         navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
         navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
 
-        setTimeout(async() => {
-            let xhr = new XMLHttpRequest();
-            xhr.open("GET","assets/osu-assets/osu.Game.Resources/Tracks/triangles.osz", true);
-            xhr.responseType = "blob";
-            xhr.send();
-            xhr.onload = async () => {
-                // Add font files to the bundle
-                PIXI.Assets.addBundle('fonts', [
-                    { alias: 'TorusRegular', src: 'assets/fonts/TorusRegular.otf' },
-                    { alias: 'TorusLight', src: 'assets/fonts/TorusLight.otf' },
-                    { alias: 'TorusThin', src: 'assets/fonts/TorusThin.otf' }
-                ]);
-                PIXI.Assets.addBundle('textures', [
-                    { alias: 'icon_ruleset_std', src: 'assets/icons/ruleset-standard.png' },
-                    { alias: 'icon_ruleset_mania', src: 'assets/icons/ruleset-mania.png' },
-                    { alias: 'icon_ruleset_taiko', src: 'assets/icons/ruleset-taiko.png' },
-                    { alias: 'icon_ruleset_ctb', src: 'assets/icons/ruleset-ctb.png' }
-                ]);
+        fetch("assets/osu-assets/osu.Game.Resources/Tracks/triangles.osz").then(response => response.blob()).then((response) => {
+            // Add font files to the bundle
+            PIXI.Assets.addBundle('fonts', [
+                { alias: 'TorusRegular', src: 'assets/fonts/TorusRegular.otf' },
+                { alias: 'TorusLight', src: 'assets/fonts/TorusLight.otf' },
+                { alias: 'TorusThin', src: 'assets/fonts/TorusThin.otf' }
+            ]);
+            PIXI.Assets.addBundle('textures', [
+                { alias: 'icon_ruleset_std', src: 'assets/icons/ruleset-standard.png' },
+                { alias: 'icon_ruleset_mania', src: 'assets/icons/ruleset-mania.png' },
+                { alias: 'icon_ruleset_taiko', src: 'assets/icons/ruleset-taiko.png' },
+                { alias: 'icon_ruleset_ctb', src: 'assets/icons/ruleset-ctb.png' }
+            ]);
 
 
-                // Load the font bundle
-                PIXI.Assets.loadBundle('fonts').then(() => {
-                    PIXI.Assets.loadBundle('textures').then(() => {
-                        Main.switchScreen(new InteractScreen(xhr.response));
-                    })
-                });
+            // Load the font bundle
+            PIXI.Assets.loadBundle('fonts').then(() => {
+                PIXI.Assets.loadBundle('textures').then(() => {
+                    fetch("assets/osu-assets/osu.Game.Resources/Samples/UI/dialog-ok-select.wav")
+                        .then(clickSound => clickSound.blob())
+                        .then((clickSound) => {
+                            Main.switchScreen(new InteractScreen(response, clickSound));
+                        });
+                })
+            });
 
-            }
-        })
+        });