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