diff --git a/docs/kiosk-data/sfx/click1.ogg b/docs/kiosk-data/sfx/click1.ogg deleted file mode 100644 index 502a729739d2..000000000000 Binary files a/docs/kiosk-data/sfx/click1.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/click2.ogg b/docs/kiosk-data/sfx/click2.ogg deleted file mode 100644 index fb04bd951f05..000000000000 Binary files a/docs/kiosk-data/sfx/click2.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/click4.ogg b/docs/kiosk-data/sfx/click4.ogg deleted file mode 100644 index 5f036e79b99b..000000000000 Binary files a/docs/kiosk-data/sfx/click4.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/click5.ogg b/docs/kiosk-data/sfx/click5.ogg deleted file mode 100644 index 28555de3cc38..000000000000 Binary files a/docs/kiosk-data/sfx/click5.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/notification.ogg b/docs/kiosk-data/sfx/notification.ogg new file mode 100644 index 000000000000..2f385edcc1f7 Binary files /dev/null and b/docs/kiosk-data/sfx/notification.ogg differ diff --git a/docs/kiosk-data/sfx/rollover2.ogg b/docs/kiosk-data/sfx/rollover2.ogg deleted file mode 100644 index d1964d061d1e..000000000000 Binary files a/docs/kiosk-data/sfx/rollover2.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/rollover3.ogg b/docs/kiosk-data/sfx/rollover3.ogg deleted file mode 100644 index 671c10d2adcf..000000000000 Binary files a/docs/kiosk-data/sfx/rollover3.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/rollover4.ogg b/docs/kiosk-data/sfx/rollover4.ogg deleted file mode 100644 index 0b9501bf8c1e..000000000000 Binary files a/docs/kiosk-data/sfx/rollover4.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/rollover5.ogg b/docs/kiosk-data/sfx/rollover5.ogg deleted file mode 100644 index 1cc1dc55eeea..000000000000 Binary files a/docs/kiosk-data/sfx/rollover5.ogg and /dev/null differ diff --git a/docs/kiosk-data/sfx/select.ogg b/docs/kiosk-data/sfx/select.ogg new file mode 100644 index 000000000000..79d3cbfb4017 Binary files /dev/null and b/docs/kiosk-data/sfx/select.ogg differ diff --git a/docs/kiosk-data/sfx/swipe.ogg b/docs/kiosk-data/sfx/swipe.ogg new file mode 100644 index 000000000000..6804da81b3c9 Binary files /dev/null and b/docs/kiosk-data/sfx/swipe.ogg differ diff --git a/docs/kiosk-data/sfx/switch.ogg b/docs/kiosk-data/sfx/switch.ogg new file mode 100644 index 000000000000..108c57ecb33b Binary files /dev/null and b/docs/kiosk-data/sfx/switch.ogg differ diff --git a/docs/kiosk-data/sfx/switch4.ogg b/docs/kiosk-data/sfx/switch4.ogg deleted file mode 100644 index 8e11491ed25e..000000000000 Binary files a/docs/kiosk-data/sfx/switch4.ogg and /dev/null differ diff --git a/kiosk/README.md b/kiosk/README.md index bda1aafb5728..84cee7c14a99 100644 --- 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 index 15085baa4445..e1473d7d3bfd 100644 --- a/kiosk/src/Components/AddingGame.tsx +++ b/kiosk/src/Components/AddingGame.tsx @@ -74,6 +74,7 @@ const AddingGame: React.FC = ({ 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 index d86760ee6482..527257cfa552 100644 --- 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,