Add microphone streaming

client/src/Color.tsx

@@ -9,7 +9,6 @@ let lastTimestamp: number
 export default function Color() {
 	const tgWebAppDataRef = useRef<string | null>(null)
 	const [color, setColor] = useState<RgbaColor>({ r: 255, g: 0, b: 255, a: 0 })
-
 	useEffect(() => {
 		const initData = urlParseHashParams(location.hash)
 		tgWebAppDataRef.current = initData.tgWebAppData
@@ -27,7 +26,6 @@ export default function Color() {
 			body: JSON.stringify({ color: [c.r, c.g, c.b], alpha: c.a, tgWebAppData }),
 		})
 	}
-
 	return (
 		<div className={classes.container}>
 			<RgbaColorPicker

mic-sender.js

@@ -0,0 +1,10 @@
+import record from 'node-record-lpcm16'
+import WebSocket from 'ws'
+
+const url = process.argv[2] || 'ws://localhost:8081'
+const ws = new WebSocket(url)
+
+ws.on('open', () => {
+  const mic = record.start({ sampleRate: 44100, channels: 1 })
+  mic.on('data', chunk => ws.send(chunk))
+})

package.json

@@ -24,8 +24,9 @@
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"@types/tough-cookie": "^4.0.5",
-		"@types/winston": "^2.4.4",
-		"axios": "^0.27.2",
+                "@types/winston": "^2.4.4",
+                "@types/ws": "^8.18.1",
+                "axios": "^0.27.2",
 		"axios-cookiejar-support": "^4.0.7",
 		"eslint": "^8.57.0",
 		"grammy": "^1.22.4",
@@ -51,12 +52,16 @@
 		"d3-interpolate": "^3.0.1",
 		"dotenv": "^16.4.5",
 		"express": "^4.18.2",
+
 		"react": "^19.1.0",
 		"react-colorful": "^5.6.1",
 		"react-dom": "^19.1.0",
 		"react-router-dom": "^6.23.0",
-		"ring-buffer-ts": "^1.2.0",
-		"winston": "^3.17.0",
-		"zod": "^3.25.57"
-	}
+                "ring-buffer-ts": "^1.2.0",
+                "ws": "^8.18.2",
+                "fft-js": "^0.0.12",
+                "node-record-lpcm16": "^1.0.1",
+                "winston": "^3.17.0",
+                "zod": "^3.25.57"
+        }
 }

src/backend/index.ts

@@ -4,6 +4,7 @@ import { startRouterIntegration } from './router'
 import { startUdpServer } from './udp'
 import { config } from './config'
 import { startNightChecks } from './night'
+import { startAudioServer } from './wsAudio'
 
 // eslint-disable-next-line no-undef
 process.env.TZ = config.TZ
@@ -14,6 +15,7 @@ export function init() {
 	if (initted) return
 	initted = true
 	startLoop()
+	startAudioServer()
 	startNightChecks()
 	startTelegram()
 	startUdpServer()

src/backend/pattern/fftRipple.ts

@@ -0,0 +1,73 @@
+import { IColorGetter, IColorMapper, IArrColor } from 'src/typings'
+import { callIndexedGetter } from './mappers'
+import { pixelsCount, hueToColor } from '../shared'
+import { settings } from 'src/settings'
+import { audioState } from '../wsAudio'
+
+interface Ripple {
+	pos: number
+	radius: number
+	brightness: number
+	hue: number
+}
+
+let ripples: Ripple[] = []
+let lastTime = Date.now()
+let averages: number[] = []
+const attenuation = 0.9
+const speed = 60
+
+function spawnRipple(bin: number, mag: number) {
+	const hue = (bin / audioState.bins.length) * 270
+	ripples.push({
+		pos: (bin / audioState.bins.length) * pixelsCount,
+		radius: 1,
+		brightness: Math.min(1, mag),
+		hue,
+	})
+}
+
+function update(time: number) {
+	const dt = (time - lastTime) * settings.effectSpeed
+	lastTime = time
+	const bins = audioState.bins
+	if (bins && bins.length) {
+		if (averages.length !== bins.length) averages = bins.slice()
+		for (let i = 0; i < bins.length; i++) {
+			const m = bins[i]
+			averages[i] = averages[i] * 0.9 + m * 0.1
+			if (m > averages[i] * 1.5) spawnRipple(i, m)
+		}
+	}
+	ripples.forEach(r => {
+		r.radius += (speed * dt) / 1000
+		r.brightness *= Math.pow(attenuation, dt / 16)
+	})
+	ripples = ripples.filter(r => r.brightness > 0.05)
+}
+
+export const getFftRippleColor: IColorGetter = (index, time) => {
+	if (index === 0) update(time)
+	let r = 0
+	let g = 0
+	let b = 0
+	for (const ripple of ripples) {
+		const dist = Math.abs(index - ripple.pos)
+		if (dist <= ripple.radius) {
+			const intensity = ripple.brightness * (1 - dist / ripple.radius)
+			const { r: rr, g: gg, b: bb } = hueToColor(ripple.hue).rgb()
+			r += rr * intensity
+			g += gg * intensity
+			b += bb * intensity
+		}
+	}
+	return [Math.min(255, Math.round(r)), Math.min(255, Math.round(g)), Math.min(255, Math.round(b))]
+}
+
+export function resetFftRipples() {
+	ripples = []
+	lastTime = Date.now()
+	averages = []
+}
+
+export const fftRippleMapper: IColorMapper = () => callIndexedGetter(getFftRippleColor)

src/backend/pattern/index.ts

@@ -8,6 +8,9 @@ import { getPlasmaColor } from './plasma'
 import { getBreatheColor } from './breathe'
 import { getWaveColor } from './wave'
 import { getHeartbeatColor, getStrobeColor, getPulseColor, getGradientPulseColor, getMultiPulseColor } from './extra'
+import { rippleMapper } from './ripple'
+import { musicRippleMapper } from './musicRipple'
+import { fftRippleMapper } from './fftRipple'
 import { createIndexedMapper, createFlatMapper } from './mappers'
 
 const transitionDuration = 250
@@ -35,6 +38,9 @@ const mappers: Record<IMode, IColorMapper> = {
 	[IMode.Pulse]: createIndexedMapper(getPulseColor),
 	[IMode.GradientPulse]: createIndexedMapper(getGradientPulseColor),
 	[IMode.MultiPulse]: createIndexedMapper(getMultiPulseColor),
+	[IMode.Ripple]: rippleMapper,
+	[IMode.MusicRipple]: musicRippleMapper,
+	[IMode.FftRipple]: fftRippleMapper,
 }
 
 export function getPixels(mode: IMode): IArrColor[][] {