New UI effects for Kiosk, authored in Arcade (#9671)

* New UI effects authored in Arcade * Update readme * Clarify readme
microsoft · Sep 5, 2023 · f9ff724 · f9ff724
1 parent 8fe9d7b
commit f9ff724
Show file tree

Hide file tree

Showing 16 changed files with 39 additions and 7 deletions.
diff --git a/docs/kiosk-data/sfx/click1.ogg b/docs/kiosk-data/sfx/click1.ogg
diff --git a/docs/kiosk-data/sfx/click2.ogg b/docs/kiosk-data/sfx/click2.ogg
diff --git a/docs/kiosk-data/sfx/click4.ogg b/docs/kiosk-data/sfx/click4.ogg
diff --git a/docs/kiosk-data/sfx/click5.ogg b/docs/kiosk-data/sfx/click5.ogg
diff --git a/docs/kiosk-data/sfx/notification.ogg b/docs/kiosk-data/sfx/notification.ogg
diff --git a/docs/kiosk-data/sfx/rollover2.ogg b/docs/kiosk-data/sfx/rollover2.ogg
diff --git a/docs/kiosk-data/sfx/rollover3.ogg b/docs/kiosk-data/sfx/rollover3.ogg
diff --git a/docs/kiosk-data/sfx/rollover4.ogg b/docs/kiosk-data/sfx/rollover4.ogg
diff --git a/docs/kiosk-data/sfx/rollover5.ogg b/docs/kiosk-data/sfx/rollover5.ogg
diff --git a/docs/kiosk-data/sfx/select.ogg b/docs/kiosk-data/sfx/select.ogg
diff --git a/docs/kiosk-data/sfx/swipe.ogg b/docs/kiosk-data/sfx/swipe.ogg
diff --git a/docs/kiosk-data/sfx/switch.ogg b/docs/kiosk-data/sfx/switch.ogg
diff --git a/docs/kiosk-data/sfx/switch4.ogg b/docs/kiosk-data/sfx/switch4.ogg
diff --git a/kiosk/README.md b/kiosk/README.md
@@ -52,3 +52,34 @@ Debug and step through Kiosk code using the browser dev tools (F12 to open).
 
 Follow the "Test in staging environment" instructions, but get your auth token from `https://makecode.com/oauth/gettoken`.
 
+
+## Authoring UI sound effects
+
+1. Open the "Kiosk Audio Effects" project in Arcade: https://makecode.com/_K6AfE6AWd9xV
+   - Click on the provided link to open the MakeCode Arcade project in your web browser.
+
+2. Tweak or add the desired sound:
+   - Within the MakeCode Arcade project, modify or add the sound effect you want.
+
+3. Play the sound in the editor a few times while capturing the audio:
+   - Install a Chrome extension called "Chrome Audio Capturer" from this link: [Link to Chrome Audio Capturer](https://github.com/arblast/Chrome-Audio-Capturer)
+   - Use the extension to capture the audio of the sound effect by playing it within the MakeCode editor.
+
+4. In a sound file editor, clip out the sound effect and export it as .ogg:
+   - Download the captured audio file.
+   - Open a sound file editor (such as Audacity or Adobe Audition).
+   - Import the downloaded audio file.
+   - Edit and clip out the specific sound effect you want.
+   - Export the edited audio as an .ogg file.
+
+5. Save the .ogg file to /pxt/docs/kiosk-data/sfx:
+   - Navigate to the specified directory (/pxt/docs/kiosk-data/sfx) in your file system.
+   - Save the edited .ogg sound effect file in this directory.
+
+6. If it's a new effect, add it to Services/SoundEffectService.ts:
+   - If the sound effect you added or modified is new and hasn't been used before, you may need to update the code in the `Services/SoundEffectService.ts` file to include the new sound effect.
+
+7. Re-share the above project and update the URL in Step 1:
+   - Share the MakeCode Arcade project with the updated sound effect, ensuring is it not saved as a Persistent Share.
+   - Update the URL in Step 1 of these instructions to reflect the new project URL.
+
diff --git a/kiosk/src/Components/AddingGame.tsx b/kiosk/src/Components/AddingGame.tsx
@@ -74,6 +74,7 @@ const AddingGame: React.FC<IProps> = ({ kiosk }) => {
         const notification = `${games} added!`;
         setNotifyContent(notification);
         setNotify(true);
+        playSoundEffect("notification");
     };
 
     useEffect(() => {

diff --git a/kiosk/src/Services/SoundEffectService.ts b/kiosk/src/Services/SoundEffectService.ts
@@ -1,7 +1,7 @@
 import { Howl } from "howler";
 import configData from "../config.json";
 
-export type SoundEffect = "swipe" | "switch" | "back" | "select";
+export type SoundEffect = "swipe" | "switch" | "select" | "notification";
 
 class SoundEffectService {
     private sounds: { [key: string]: Howl };
@@ -10,25 +10,25 @@ class SoundEffectService {
     constructor() {
         this.sounds = {
             swipe: new Howl({
-                src: ["/kiosk-data/sfx/click1.ogg"],
+                src: ["/kiosk-data/sfx/swipe.ogg"],
                 autoplay: false,
                 preload: true,
                 loop: false,
             }),
             switch: new Howl({
-                src: ["/kiosk-data/sfx/rollover2.ogg"],
+                src: ["/kiosk-data/sfx/switch.ogg"],
                 autoplay: false,
                 preload: true,
                 loop: false,
             }),
-            back: new Howl({
-                src: ["/kiosk-data/sfx/click2.ogg"],
+            select: new Howl({
+                src: ["/kiosk-data/sfx/select.ogg"],
                 autoplay: false,
                 preload: true,
                 loop: false,
             }),
-            select: new Howl({
-                src: ["/kiosk-data/sfx/switch4.ogg"],
+            notification: new Howl({
+                src: ["/kiosk-data/sfx/notification.ogg"],
                 autoplay: false,
                 preload: true,
                 loop: false,