turn the beep into a pling
This commit is contained in:
parent
40b20b2157
commit
27c0be6b56
2 changed files with 57 additions and 17 deletions
|
|
@ -6,6 +6,7 @@ import {
|
||||||
import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
|
import { emojify, findEmojis } from "./emojis.mjs?v=048af96";
|
||||||
import { linkify } from "./links.mjs?v=048af96";
|
import { linkify } from "./links.mjs?v=048af96";
|
||||||
import { joinSession } from "./watch-session.mjs?v=048af96";
|
import { joinSession } from "./watch-session.mjs?v=048af96";
|
||||||
|
import { pling } from "./pling.mjs?v=048af96"
|
||||||
import { state } from "./state.mjs";
|
import { state } from "./state.mjs";
|
||||||
|
|
||||||
function setCaretPosition(elem, caretPos) {
|
function setCaretPosition(elem, caretPos) {
|
||||||
|
|
@ -417,7 +418,7 @@ export const logEventToChat = async (event) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
printChatMessage("ping", event.user, event.colour, messageContent);
|
printChatMessage("ping", event.user, event.colour, messageContent);
|
||||||
beep();
|
pling();
|
||||||
if ("Notification" in window) {
|
if ("Notification" in window) {
|
||||||
const title = "watch party :)";
|
const title = "watch party :)";
|
||||||
const options = {
|
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) => {
|
export const updateViewerList = (viewers) => {
|
||||||
const listContainer = document.querySelector("#viewer-list");
|
const listContainer = document.querySelector("#viewer-list");
|
||||||
|
|
||||||
|
|
|
||||||
55
frontend/lib/pling.mjs
Normal file
55
frontend/lib/pling.mjs
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
export const pling = () => {
|
||||||
|
const maxGain = 0.4;
|
||||||
|
const duration = 0.22;
|
||||||
|
const fadeDuration = 0.1;
|
||||||
|
const secondBeepOffset = fadeDuration;
|
||||||
|
|
||||||
|
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";
|
||||||
|
|
||||||
|
firstBeep.start(ctx.currentTime);
|
||||||
|
firstBeep.stop(ctx.currentTime + duration);
|
||||||
|
secondBeep.start(ctx.currentTime + secondBeepOffset);
|
||||||
|
secondBeep.stop(ctx.currentTime + (secondBeepOffset + duration));
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue