turn the beep into a pling

frontend/lib/chat.mjs

@@ -6,6 +6,7 @@ import {
 import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
 import { linkify } from "./links.mjs?v=048af96";
 import { joinSession } from "./watch-session.mjs?v=048af96";
+import { pling } from "./pling.mjs?v=048af96"
 import { state } from "./state.mjs";
 
 function setCaretPosition(elem, caretPos) {
@@ -417,7 +418,7 @@ export const logEventToChat = async (event) => {
       }
 
       printChatMessage("ping", event.user, event.colour, messageContent);
-      beep();
+      pling();
       if ("Notification" in window) {
         const title = "watch party :)";
         const options = {
@@ -440,22 +441,6 @@ export const logEventToChat = async (event) => {
   }
 };
 
-const beep = () => {
-  const context = new AudioContext();
-
-  const gain = context.createGain();
-  gain.connect(context.destination);
-  gain.gain.value = 0.15;
-
-  const oscillator = context.createOscillator();
-  oscillator.connect(gain);
-  oscillator.frequency.value = 400;
-  oscillator.type = "sine";
-
-  oscillator.start(context.currentTime);
-  oscillator.stop(context.currentTime + 0.22);
-};
-
 export const updateViewerList = (viewers) => {
   const listContainer = document.querySelector("#viewer-list");
 

frontend/lib/pling.mjs

@@ -0,0 +1,80 @@
+export const pling = () => {
+  const maxGain = 0.3;
+  const duration = 0.22;
+  const fadeDuration = 0.1;
+  const secondBeepOffset = 0.05;
+  const thirdBeepOffset = 2 * secondBeepOffset;
+
+  const ctx = new AudioContext();
+
+  const firstBeepGain = ctx.createGain();
+  firstBeepGain.connect(ctx.destination);
+  firstBeepGain.gain.setValueAtTime(0.01, ctx.currentTime);
+  firstBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + fadeDuration
+  );
+  firstBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + (duration - fadeDuration)
+  );
+  firstBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + duration
+  );
+
+  const firstBeep = ctx.createOscillator();
+  firstBeep.connect(firstBeepGain);
+  firstBeep.frequency.value = 400;
+  firstBeep.type = "sine";
+
+  const secondBeepGain = ctx.createGain();
+  secondBeepGain.connect(ctx.destination);
+  secondBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + secondBeepOffset);
+  secondBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + secondBeepOffset + fadeDuration
+  );
+  secondBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + secondBeepOffset + (duration - fadeDuration)
+  );
+  secondBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + secondBeepOffset + duration
+  );
+
+  const secondBeep = ctx.createOscillator();
+  secondBeep.connect(secondBeepGain);
+  secondBeep.frequency.value = 600;
+  secondBeep.type = "sine";
+
+  const thirdBeepGain = ctx.createGain();
+  thirdBeepGain.connect(ctx.destination);
+  thirdBeepGain.gain.setValueAtTime(0.01, ctx.currentTime + thirdBeepOffset);
+  thirdBeepGain.gain.exponentialRampToValueAtTime(
+    maxGain,
+    ctx.currentTime + thirdBeepOffset + fadeDuration
+  );
+  thirdBeepGain.gain.setValueAtTime(
+    maxGain,
+    ctx.currentTime + thirdBeepOffset + (duration - fadeDuration)
+  );
+  thirdBeepGain.gain.exponentialRampToValueAtTime(
+    0.01,
+    ctx.currentTime + thirdBeepOffset + duration
+  );
+
+  const thirdBeep = ctx.createOscillator();
+  thirdBeep.connect(thirdBeepGain);
+  thirdBeep.frequency.value = 900;
+  thirdBeep.type = "sine";
+
+  firstBeep.start(ctx.currentTime);
+  firstBeep.stop(ctx.currentTime + duration);
+  secondBeep.start(ctx.currentTime + secondBeepOffset);
+  secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
+  thirdBeep.start(ctx.currentTime + thirdBeepOffset);
+  thirdBeep.stop(ctx.currentTime + (thirdBeepOffset + duration));
+};
+