import { useEffect, useRef, useState } from 'react'; import config from '../app.config.json'; import { download, toCsv, useStored } from './kit'; import { mic } from './mic'; import { sampleAudio, sampleCredit, sampleLevels, samplePeak, sampleSeconds } from './sample'; import './styles.css'; interface Take { id: number; at: string; seconds: number; peak: number; verdict: string; room: string; url?: string; bars?: number[]; sample?: boolean } const mmss = (s: number) => `${String(Math.floor(s / 60)).padStart(2, '0')}:${String(s % 60).padStart(2, '0')}`; const dB = (peak: number) => (peak <= 0 ? '−∞' : `${(20 * Math.log10(peak)).toFixed(0)}`) + ' dB'; const BARS = 240; const FLOOR = -40; /** Bar height on a dB scale from the floor, as a level meter draws it. */ const dbHeight = (v: number) => (v <= 0 ? 0 : Math.max(0, Math.min(100, ((20 * Math.log10(v) - FLOOR) / -FLOOR) * 100))); const sampleTake: Take = { id: 1, at: 'Sample', seconds: sampleSeconds, peak: Math.round(samplePeak * 100), verdict: samplePeak >= config.tooLoud ? 'Clipped' : samplePeak < config.tooQuiet ? 'Too quiet' : 'Good', room: config.rooms[0] as string, url: sampleAudio, bars: sampleLevels, sample: true, }; export default function App() { const [done, setDone] = useStored('checklist', []); const [room, setRoom] = useStored('room', config.rooms[0] as string); const [noise, setNoise] = useStored('noise', ''); const [takes, setTakes] = useStored('takes', [sampleTake]); const [listening, setListening] = useState(false); const [level, setLevel] = useState({ rms: 0, peak: 0 }); const [seconds, setSeconds] = useState(0); const [micError, setMicError] = useState(''); const [live, setLive] = useState([]); const [shown, setShown] = useState(takes[0]?.id ?? 0); const [playing, setPlaying] = useState<{ id: number; at: number } | null>(null); const peak = useRef(0); const bars = useRef([]); const audio = useRef(null); const [playback, setPlayback] = useState>({}); useEffect(() => { if (!listening) return; bars.current = []; const off = mic.onLevel((next) => { setLevel(next); peak.current = Math.max(peak.current, next.peak); bars.current.push(next.peak); if (bars.current.length > BARS) bars.current.shift(); setLive(bars.current.slice()); }); const timer = setInterval(() => setSeconds((s) => s + 1), 1000); return () => { off(); clearInterval(timer); }; }, [listening]); async function start() { setMicError(''); try { await mic.start(); peak.current = 0; setSeconds(0); setListening(true); } catch { setMicError('The microphone is off. Allow it above the app to see your level.'); } } async function stop() { const blob = await mic.stop(); setListening(false); setLevel({ rms: 0, peak: 0 }); const verdict = peak.current >= config.tooLoud ? 'Clipped' : peak.current < config.tooQuiet ? 'Too quiet' : 'Good'; const take: Take = { id: Date.now(), at: new Date().toLocaleTimeString(), seconds, peak: Math.round(peak.current * 100), verdict, room, bars: bars.current.slice() }; setTakes((list) => [take, ...list]); setShown(take.id); if (blob) setPlayback((urls) => ({ ...urls, [take.id]: URL.createObjectURL(blob) })); } function play(take: Take) { if (playing && playing.id === take.id) { audio.current?.pause(); setPlaying(null); return; } const src = take.url || playback[take.id]; if (!src) return; audio.current?.pause(); const a = new Audio(src); audio.current = a; setShown(take.id); setPlaying({ id: take.id, at: 0 }); a.ontimeupdate = () => setPlaying({ id: take.id, at: a.duration ? a.currentTime / a.duration : 0 }); a.onended = () => setPlaying(null); void a.play(); } const ready = done.length === config.checklist.length; const status = !listening ? '' : level.peak >= config.tooLoud ? 'Too loud, move back' : level.rms < config.tooQuiet ? 'Too quiet, move closer' : 'Good level'; const recorded = takes.reduce((sum, take) => sum + take.seconds, 0); const current = takes.find((take) => take.id === shown) || takes[0]; const plate = listening ? live : current?.bars || []; const played = playing && current && playing.id === current.id ? playing.at : listening ? 1 : 0; const takeNo = current ? takes.length - takes.indexOf(current) : 0; return (

{config.title}

{config.subtitle}

{config.dataNote}

too loud {Math.round(config.tooLoud * 100)}% too quiet {Math.round(config.tooQuiet * 100)}%

{Array.from({ length: BARS }, (_, i) => { const v = plate.length ? plate[Math.floor((i * plate.length) / BARS)] : 0; const on = listening || i / BARS <= played; return ; })}

{FLOOR} dB to 0 dB {!listening && !plate.length &&
Press Start listening. Your level draws here while you speak.
}

{mmss(listening ? seconds : current ? current.seconds : 0)} {listening ? ( ) : ( )} {status || 'Not listening'} {current && !listening && ( take {takeNo} · peak {dB(current.peak / 100)} · {current.verdict} )} {listening && peak {dB(peak.current)}}
{micError &&
{micError}
}

Takes

{takes.length === 0 ? (
Your first take appears here with its length and peak level.
) : (
{takes.map((take) => ( setShown(take.id)}> ))}

Time Length Peak Room Result

{take.at} {mmss(take.seconds)} {take.peak}% {take.room} {take.verdict} {(take.url || playback[take.id]) && }

{takes.some((take) => take.sample) &&
Sample take: {sampleCredit}
}
)}

Before you record
{done.length} of {config.checklist.length}

{config.checklist.map((item: string) => (
setDone((list) => (list.includes(item) ? list.filter((x) => x !== item) : [...list, item]))} /> {item}
))}

Progress

{mmss(recorded)} of {config.targetMinutes} minutes

Conditions
Room Background noise setNoise(event.target.value)} placeholder="Fridge hum, traffic, none" />

Time	Length	Peak	Room	Result
{take.at}	{mmss(take.seconds)}	{take.peak}%	{take.room}	{take.verdict}	{(take.url \|\| playback[take.id]) && }

); }

Cookies