feat: ✨ Add audio packs support

README.md

@@ -141,6 +141,10 @@ This project is licensed under the AGPL 3.0 - see the [LICENSE](LICENSE) file fo
 
 All Versia assets (icon, logo, banners, etc) are licensed under [CC-BY-NC-SA-4.0](https://creativecommons.org/licenses/by-nc-sa/4.0).
 
+## Misskey Audio
+
+The `public/packs/audio/misskey` directory contains audio files from the Misskey project, which are licensed under the [AGPL 3.0](https://github.com/misskey-dev/misskey/blob/refs/heads/develop/LICENSE).
+
 # Acknowledgments
 
 ## Projects

components/composer/composer.vue

@@ -120,6 +120,7 @@ import Files from "./files.vue";
 
 const { Control_Enter, Command_Enter } = useMagicKeys();
 const ctrlEnterSend = useSetting(SettingIds.CtrlEnterToSend);
+const { play } = useAudio();
 const fileInput = ref<HTMLInputElement | null>(null);
 
 onMounted(() => {
@@ -217,6 +218,7 @@ const submit = async () => {
             });
 
             useEvent("composer:send-edit", data);
+            play("publish");
             useEvent("composer:close");
         } else {
             const { data } = await client.value.postStatus(state.content, {
@@ -236,6 +238,7 @@ const submit = async () => {
             });
 
             useEvent("composer:send", data as Status);
+            play("publish");
             useEvent("composer:close");
         }
     } catch (_e) {

components/notes/actions.vue

@@ -52,6 +52,7 @@ const emit = defineEmits<{
     quote: [];
     delete: [];
 }>();
+const { play } = useAudio();
 
 const confirmLikes = useSetting(SettingIds.ConfirmLike);
 const confirmReblogs = useSetting(SettingIds.ConfirmReblog);
@@ -70,6 +71,7 @@ const like = async () => {
         }
     }
 
+    play("like");
     const id = toast.loading(m.slimy_candid_tiger_read());
     const { data } = await client.value.favouriteStatus(noteId);
     toast.dismiss(id);

composables/Audio.ts

@@ -0,0 +1,64 @@
+export type AudioNames = "publish" | "like";
+
+export type AudioManifest = Record<AudioNames, { src: string[] }>;
+
+export const useAudio = (): {
+    play: (name: AudioNames) => void;
+} => {
+    const audio = new Audio();
+
+    const play = (name: AudioNames) => {
+        const audioData = audioManifest.manifest.value?.[name];
+
+        if (!audioData) {
+            throw new Error(`Audio not found: ${name}`);
+        }
+
+        const src = audioData.src[
+            Math.floor(Math.random() * audioData.src.length)
+        ] as string;
+
+        audio.src = src;
+        audio.play();
+    };
+
+    return { play };
+};
+
+export const useAudioManifest = () => {
+    const audioTheme = ref("misskey" as const);
+    const url = computed(() => `/packs/audio/${audioTheme.value}.json`);
+
+    // Fetch from /packs/audio/:name.json
+    const manifest = ref(null as null | AudioManifest);
+
+    // Fetch the manifest
+    watch(
+        url,
+        async (url) => {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(
+                    `Failed to fetch audio theme manifest at ${url}`,
+                );
+            }
+
+            manifest.value = await response.json();
+
+            // Preload all audio files
+            if (manifest.value) {
+                for (const audioData of Object.values(manifest.value)) {
+                    for (const src of audioData.src) {
+                        new Audio(src);
+                    }
+                }
+            }
+        },
+        { immediate: true },
+    );
+
+    return { audioTheme, manifest, url };
+};
+
+export const audioManifest = useAudioManifest();

public/packs/audio/misskey.json

@@ -0,0 +1,14 @@
+{
+    "publish": {
+        "src": [
+            "/packs/audio/misskey/n-aec-4va.mp3",
+            "/packs/audio/misskey/n-aec-4vb.mp3"
+        ]
+    },
+    "like": {
+        "src": [
+            "/packs/audio/misskey/bubble1.mp3",
+            "/packs/audio/misskey/bubble2.mp3"
+        ]
+    }
+}