annie
/
watch-party
forked from lavender/watch-party
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

turn the beep into a pling

remotes/1694359591236046747/main
maia arson crimew 2022-03-30 16:16:14 +02:00
parent 40b20b2157
commit ee93fb84af
2 changed files with 82 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/lib/chat.mjs
View File

@ -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");

80
frontend/lib/pling.mjs Normal file
View File

@ -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));
};