forked from lavender/watch-party
		
	turn the beep into a pling
This commit is contained in:
		
							parent
							
								
									40b20b2157
								
							
						
					
					
						commit
						ee93fb84af
					
				
					 2 changed files with 82 additions and 17 deletions
				
			
		|  | @ -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
									
								
							
							
						
						
									
										80
									
								
								frontend/lib/pling.mjs
									
									
									
									
									
										Normal 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)); | ||||
| }; | ||||
| 
 | ||||
		Loading…
	
		Reference in a new issue