chat notify sound

Author: Narazaka

README.md

@@ -52,7 +52,10 @@ verseModule
   .initialize(enableXrController)
   .initialize(enableMoveController)
   .initialize(nameLog, {})
-  .initialize(chat, { balloon: true });
+  .initialize(chat, {
+    balloon: true,
+    notifySound: { audioSrc: "./asset/ui/chat.m4a" },
+  });
 ```
 
 see [examples/src/main.ts](https://github.com/Narazaka/verseengine-modules/blob/master/examples/src/main.ts)

examples/public/asset/ui/chat.m4a

@@ -62,7 +62,10 @@ function main() {
       .initialize(enableXrController)
       .initialize(enableMoveController)
       .initialize(nameLog, {})
-      .initialize(chat, { balloon: true });
+      .initialize(chat, {
+        balloon: true,
+        notifySound: { audioSrc: "./asset/ui/chat.m4a" },
+      });
   });
 
   if ("xr" in navigator && navigator.xr) {

examples/src/main.ts

@@ -12,6 +12,7 @@ import { getOrAddSprite } from "./util/graphic/getOrAddSprite";
 import { getOrAddNameplateContainer } from "./util/graphic/getOrAddNameplateContainer";
 import { createTextSpriteData } from "./util/graphic/createTextSpriteData";
 import { drawRoundedRectPath } from "./util/graphic/drawRoundedRectPath";
+import { createCachedAudio } from "./util/cachedAudio";
 
 const chatMessageMaxLength = 200;
 
@@ -129,6 +130,8 @@ function handleChatBalloon(
   balloon.scale.set(scale.x, scale.y, scale.z);
 }
 
+const { getAudio, createAudio } = createCachedAudio();
+
 export type ChatMessageData = {
   chatMessage?: string;
 };
@@ -148,6 +151,10 @@ export default ({
       onChatMessage: (chatMessage: string) => unknown,
     ) => unknown;
     addLog?: ((message: string) => unknown) | false;
+    notifySound?: {
+      audioSrc: string;
+      volume?: number;
+    };
     balloon?:
       | true
       | {
@@ -173,12 +180,23 @@ export default ({
         : options?.addLog || getDefaultAddLog(domRoot);
     const balloonOption = options?.balloon === true ? {} : options?.balloon;
 
+    if (options?.notifySound) {
+      createAudio(
+        domRoot,
+        options.notifySound.audioSrc,
+        options.notifySound.volume,
+      );
+    }
+
     addTextDataChangedListener((otherPerson, data) => {
       if (data.chatMessage) {
         if (addLog) {
           const message = makeLogMessage(data);
           addLog(message!);
         }
+        if (options?.notifySound) {
+          getAudio()?.play();
+        }
       }
       if (balloonOption) {
         handleChatBalloon(

src/chat.ts

@@ -4,32 +4,18 @@
  */
 import type { VerseModuleBase } from "./VerseModuleBase";
 import { PlayerSessionIdData } from "./playerSessionId";
-
-let $audioCache: HTMLAudioElement | undefined;
+import { createCachedAudio } from "./util/cachedAudio";
 
 /** @internal */
-export function createJoinAudio(
-  parent: HTMLElement,
-  audioSrc: string,
-  volume = 0.03,
-) {
-  if ($audioCache) return $audioCache;
-  const $audio = document.createElement("audio");
-  $audio.preload = "auto";
-  $audio.src = audioSrc;
-  $audio.volume = volume;
-  parent.appendChild($audio);
-  $audioCache = $audio;
-  return $audio;
-}
+const { getAudio, createAudio } = createCachedAudio();
 
 const ids = new Set<string>();
 
 /** @internal */
 export function handleJoinSound(id: string) {
   if (ids.has(id)) return;
   ids.add(id);
-  $audioCache?.play();
+  getAudio()?.play();
 }
 
 /**
@@ -40,7 +26,7 @@ export default ({
   domRoot,
 }: VerseModuleBase<{}, PlayerSessionIdData>) => ({
   initialize(options: { audioSrc: string; volume?: number }) {
-    createJoinAudio(domRoot, options.audioSrc, options.volume);
+    createAudio(domRoot, options.audioSrc, options.volume);
     addTextDataChangedListener((_, data) => {
       handleJoinSound(data.playerSessionId);
     });

src/joinSound.ts

@@ -0,0 +1,19 @@
+export function createCachedAudio() {
+  let $audioCache: HTMLAudioElement | undefined;
+
+  return {
+    createAudio(parent: HTMLElement, audioSrc: string, volume = 0.03) {
+      if ($audioCache) return $audioCache;
+      const $audio = document.createElement("audio");
+      $audio.preload = "auto";
+      $audio.src = audioSrc;
+      $audio.volume = volume;
+      parent.appendChild($audio);
+      $audioCache = $audio;
+      return $audio;
+    },
+    getAudio() {
+      return $audioCache;
+    },
+  };
+}