// Original teaser music and sound design, synthesized from nothing with the Web Audio API (OfflineAudioContext): no // samples, no downloaded audio. 128 BPM, F minor: a tense intro under the inbox, a hard cut to near silence for the // typed command, the groove from the Enter key on, a calm bar under the Submit button, the hit on the logo. On top: // mail blips, key clicks, a whoosh into every whip / mask / zoom and a hit on every cut (script.js CUTS), ticks on // every finding, rising chimes on every fix, ticks for the screenshot wall and the Data safety rows. Deterministic. // renderWav() returns a 32-bit float stereo WAV (48 kHz) as base64; render.ts masters it with ffmpeg loudnorm. import { B, BAR, BEAT, CUTS, DESKTOP, DURATION, ENTER_AT, keyTimes, scene, TICKS } from './script.js'; const SR = 48000; const midi = m => 440 * Math.pow(2, (m - 69) / 12); function rng(seed) { // mulberry32 let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) >>> 0; let t = a; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // chords per bar (root midi in octave 3, intervals) const CH = { Fm: [53, [0, 3, 7]], Db: [49, [0, 4, 7]], Ab: [56, [0, 4, 7]], Eb: [51, [0, 4, 7]] }; // 20 bars (the video ends half way into the last): hook (0-1) · command + scan (1-5) · fixed, shots, decl (6-10) · // desktop (10-14) · the CLI montage (15-16) · submit (16-17) · brand (18-19) const BARS = ['Fm', 'Db', 'Fm', 'Db', 'Ab', 'Eb', 'Fm', 'Db', 'Ab', 'Eb', 'Fm', 'Db', 'Ab', 'Eb', 'Fm', 'Ab', 'Db', 'Eb', 'Fm', 'Fm']; const ARP = [0, 2, 4, 3, 5, 4, 2, 3, 0, 2, 4, 6, 5, 4, 3, 2]; export async function renderMusic() { const ctx = new OfflineAudioContext({ numberOfChannels: 2, length: Math.ceil(DURATION * SR) + SR, sampleRate: SR }); const R = rng(20261010); // shared noise const noise = ctx.createBuffer(2, SR * 3, SR); for (let c = 0; c < 2; c++) { const d = noise.getChannelData(c); for (let i = 0; i < d.length; i++) d[i] = R() * 2 - 1; } // reverb impulse const ir = ctx.createBuffer(2, Math.floor(SR * 2.6), SR); for (let c = 0; c < 2; c++) { const d = ir.getChannelData(c); for (let i = 0; i < d.length; i++) d[i] = (R() * 2 - 1) * Math.pow(1 - i / d.length, 3.2); } // buses const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -14; comp.knee.value = 6; comp.ratio.value = 3.5; comp.attack.value = 0.004; comp.release.value = 0.16; const master = ctx.createGain(); master.gain.value = 0.7; master.connect(comp); comp.connect(ctx.destination); const verb = ctx.createConvolver(); verb.buffer = ir; const verbIn = ctx.createGain(); verbIn.gain.value = 0.5; verbIn.connect(verb); verb.connect(master); const duck = ctx.createGain(); duck.connect(master); // sidechained group: pad, bass, arp const drums = ctx.createGain(); drums.gain.value = 0.9; drums.connect(master); const arpBus = ctx.createGain(); arpBus.gain.value = 0.55; const arpLP = ctx.createBiquadFilter(); arpLP.type = 'lowpass'; arpLP.Q.value = 6; arpBus.connect(arpLP); arpLP.connect(duck); // stereo echo on the arp for (const [time, pan] of [[BEAT * 0.75, -0.6], [BEAT * 1.5, 0.6]]) { const dl = ctx.createDelay(2); dl.delayTime.value = time; const fb = ctx.createGain(); fb.gain.value = 0.28; const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.value = 2600; const p = ctx.createStereoPanner(); p.pan.value = pan; const wet = ctx.createGain(); wet.gain.value = 0.32; arpLP.connect(dl); dl.connect(lp); lp.connect(fb); fb.connect(dl); lp.connect(wet); wet.connect(p); p.connect(duck); } const arpVerb = ctx.createGain(); arpVerb.gain.value = 0.18; arpLP.connect(arpVerb); arpVerb.connect(verbIn); // arp filter: closed under the inbox, open from the Enter key, wide into the Submit card, dark under it, bright on the logo const f = arpLP.frequency; const sub = scene('submit').start, brand = scene('brand').start; f.setValueAtTime(380, 0); f.exponentialRampToValueAtTime(900, B(7) - 0.01); f.setValueAtTime(2600, ENTER_AT); f.linearRampToValueAtTime(3400, sub - BAR); f.exponentialRampToValueAtTime(7000, sub - 0.01); f.setValueAtTime(900, sub); f.exponentialRampToValueAtTime(1800, brand - 0.01); f.setValueAtTime(4200, brand); f.exponentialRampToValueAtTime(900, DURATION); const env = (g, t, a, peak, d, end = 0.0005) => { g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(peak, t + a); g.gain.exponentialRampToValueAtTime(end, t + a + d); }; const noiseSrc = (t, dur, off = R() * 1.5) => { const s = ctx.createBufferSource(); s.buffer = noise; s.start(t, off, dur); return s; }; // sound effects bus (balanced under the music, before the master compressor) const sfx = ctx.createGain(); sfx.gain.value = 0.85; sfx.connect(master); const sfxVerb = ctx.createGain(); sfxVerb.gain.value = 0.35; sfxVerb.connect(verbIn); function blip(t, m, g, len = 0.18, type = 'sine', pan = 0) { const o = ctx.createOscillator(); o.type = type; o.frequency.value = midi(m); const p = ctx.createStereoPanner(); p.pan.value = pan; const v = ctx.createGain(); env(v, t, 0.003, g, len); o.connect(v); v.connect(p); p.connect(sfx); p.connect(sfxVerb); o.start(t); o.stop(t + len + 0.05); } /** A mail arriving: a soft two-tone notification blip and a short swish. */ function mail(t) { blip(t, 84, 0.12, 0.16); blip(t + 0.075, 91, 0.1, 0.3); whoosh(t - 0.12, 0.14, 0.08, 1200, 6000); } /** A finding landing: a low, slightly sour thud with a click on top. */ function bad(t) { blip(t, 41, 0.3, 0.28, 'triangle'); blip(t, 47, 0.12, 0.2, 'square'); const n = noiseSrc(t, 0.03); const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 2500; const v = ctx.createGain(); env(v, t, 0.001, 0.25, 0.03); n.connect(hp); hp.connect(v); v.connect(sfx); } /** A fix: rising bell chimes (Ab major pentatonic), the fifth one brighter. */ const GOOD = [68, 70, 72, 75, 80]; function good(t, i) { blip(t, GOOD[i], 0.13, 0.5, 'sine', -0.3 + i * 0.15); blip(t, GOOD[i] + 12, 0.05, 0.35, 'triangle', 0.2); if (i === 4) { blip(t + 0.09, 84, 0.1, 0.8); blip(t + 0.09, 87, 0.07, 0.8); } } /** A small UI pop (callouts). */ function pop(t) { const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(520, t); o.frequency.exponentialRampToValueAtTime(1300, t + 0.07); const v = ctx.createGain(); env(v, t, 0.002, 0.14, 0.09); o.connect(v); v.connect(sfx); o.start(t); o.stop(t + 0.15); } /** A tick (screenshot tiles, checkboxes). */ function tick(t, g = 0.08, f0 = 3200) { const n = noiseSrc(t, 0.015); const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = f0; bp.Q.value = 4; const v = ctx.createGain(); env(v, t, 0.0006, g, 0.012); n.connect(bp); bp.connect(v); v.connect(sfx); } /** A mouse click. */ function click(t) { tick(t, 0.22, 2400); tick(t + 0.055, 0.12, 1800); } /** A sub drop for the hard cut. */ function thud(t, g = 0.7) { const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(70, t); o.frequency.exponentialRampToValueAtTime(30, t + 0.6); const v = ctx.createGain(); env(v, t, 0.004, g, 0.7); o.connect(v); v.connect(master); o.start(t); o.stop(t + 0.8); } // ---- voices ---- function kick(t, g = 1) { const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(155, t); o.frequency.exponentialRampToValueAtTime(44, t + 0.11); const v = ctx.createGain(); env(v, t, 0.002, 1.0 * g, 0.42); o.connect(v); v.connect(drums); o.start(t); o.stop(t + 0.5); const n = noiseSrc(t, 0.01); const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 3500; const nv = ctx.createGain(); env(nv, t, 0.001, 0.22 * g, 0.012); n.connect(hp); hp.connect(nv); nv.connect(drums); duck.gain.setValueAtTime(0.28, t); duck.gain.linearRampToValueAtTime(1, t + 0.22); } function hat(t, g, pan) { const n = noiseSrc(t, 0.06); const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = 7500; const p = ctx.createStereoPanner(); p.pan.value = pan; const v = ctx.createGain(); env(v, t, 0.001, g, 0.04); n.connect(hp); hp.connect(v); v.connect(p); p.connect(drums); } function clap(t, g = 0.4) { const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 1300; bp.Q.value = 0.9; const v = ctx.createGain(); v.gain.setValueAtTime(0, t); for (let i = 0; i < 3; i++) { v.gain.setValueAtTime(g, t + i * 0.011); v.gain.exponentialRampToValueAtTime(g * 0.2, t + i * 0.011 + 0.009); } v.gain.setValueAtTime(g * 0.8, t + 0.034); v.gain.exponentialRampToValueAtTime(0.0005, t + 0.2); const n = noiseSrc(t, 0.25); n.connect(bp); bp.connect(v); v.connect(drums); const s = ctx.createGain(); s.gain.value = 0.5; v.connect(s); s.connect(verbIn); } function snare(t, g) { const n = noiseSrc(t, 0.12); const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 1900; bp.Q.value = 0.7; const v = ctx.createGain(); env(v, t, 0.001, g, 0.09); n.connect(bp); bp.connect(v); v.connect(drums); const o = ctx.createOscillator(); o.type = 'triangle'; o.frequency.setValueAtTime(240, t); o.frequency.exponentialRampToValueAtTime(160, t + 0.05); const ov = ctx.createGain(); env(ov, t, 0.001, g * 0.5, 0.06); o.connect(ov); ov.connect(drums); o.start(t); o.stop(t + 0.12); } function arpNote(t, m, g = 0.12, len = 0.17) { const v = ctx.createGain(); env(v, t, 0.003, g, len); v.connect(arpBus); for (const [type, det] of [['sawtooth', -7], ['square', 7]]) { const o = ctx.createOscillator(); o.type = type; o.frequency.value = midi(m); o.detune.value = det; const og = ctx.createGain(); og.gain.value = type === 'square' ? 0.5 : 0.8; o.connect(og); og.connect(v); o.start(t); o.stop(t + len + 0.05); } } function bass(t, m, g = 0.32, len = BEAT * 0.45) { const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.setValueAtTime(900, t); lp.frequency.exponentialRampToValueAtTime(220, t + len); lp.Q.value = 4; const v = ctx.createGain(); v.gain.setValueAtTime(0, t); v.gain.linearRampToValueAtTime(g, t + 0.004); v.gain.setValueAtTime(g, t + len * 0.7); v.gain.linearRampToValueAtTime(0, t + len); lp.connect(v); v.connect(duck); const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = midi(m); o.connect(lp); o.start(t); o.stop(t + len + 0.02); const sub = ctx.createOscillator(); sub.type = 'sine'; sub.frequency.value = midi(m - 12); const sg = ctx.createGain(); sg.gain.value = 0.9; sub.connect(sg); sg.connect(v); sub.start(t); sub.stop(t + len + 0.02); } function pad(t, dur, notes, g = 0.05, cutoff = 1500) { const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.value = cutoff; lp.Q.value = 0.7; const v = ctx.createGain(); v.gain.setValueAtTime(0, t); v.gain.linearRampToValueAtTime(g, t + 0.25); v.gain.setValueAtTime(g, t + dur - 0.1); v.gain.linearRampToValueAtTime(0, t + dur + 0.25); lp.connect(v); v.connect(duck); const s = ctx.createGain(); s.gain.value = 0.6; v.connect(s); s.connect(verbIn); for (const m of notes) for (const det of [-9, 9]) { const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = midi(m); o.detune.value = det; const p = ctx.createStereoPanner(); p.pan.value = det < 0 ? -0.4 : 0.4; o.connect(p); p.connect(lp); o.start(t); o.stop(t + dur + 0.3); } } function impact(t, big = false) { const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(big ? 120 : 100, t); o.frequency.exponentialRampToValueAtTime(32, t + (big ? 0.9 : 0.5)); const v = ctx.createGain(); env(v, t, 0.003, big ? 0.95 : 0.6, big ? 1.3 : 0.6); o.connect(v); v.connect(master); o.start(t); o.stop(t + 1.6); const n = noiseSrc(t, 2.0); const hp = ctx.createBiquadFilter(); hp.type = 'highpass'; hp.frequency.value = big ? 1800 : 3200; const nv = ctx.createGain(); env(nv, t, 0.002, big ? 0.32 : 0.16, big ? 1.8 : 0.9); n.connect(hp); hp.connect(nv); nv.connect(master); const s = ctx.createGain(); s.gain.value = big ? 0.7 : 0.4; nv.connect(s); s.connect(verbIn); } function stab(t, name, g = 0.09) { const [root, iv] = CH[name]; const notes = [root - 12, ...iv.map(i => root + i), ...iv.map(i => root + 12 + i)]; const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.setValueAtTime(5000, t); lp.frequency.exponentialRampToValueAtTime(600, t + 1.4); const v = ctx.createGain(); env(v, t, 0.004, g, 1.6); lp.connect(v); v.connect(master); const s = ctx.createGain(); s.gain.value = 0.8; v.connect(s); s.connect(verbIn); for (const m of notes) for (const det of [-11, 0, 11]) { const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = midi(m); o.detune.value = det; o.connect(lp); o.start(t); o.stop(t + 1.8); } } function whoosh(t, dur, g = 0.22, from = 500, to = 7000) { const n = noiseSrc(t, dur + 0.05); const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.Q.value = 2.2; bp.frequency.setValueAtTime(from, t); bp.frequency.exponentialRampToValueAtTime(to, t + dur); const v = ctx.createGain(); v.gain.setValueAtTime(0.0001, t); v.gain.exponentialRampToValueAtTime(g, t + dur * 0.95); v.gain.linearRampToValueAtTime(0, t + dur); n.connect(bp); bp.connect(v); v.connect(master); } function riser(t, dur, g = 0.07) { whoosh(t, dur, 0.3, 300, 9000); const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.setValueAtTime(midi(53), t); o.frequency.exponentialRampToValueAtTime(midi(77), t + dur); const lp = ctx.createBiquadFilter(); lp.type = 'lowpass'; lp.frequency.setValueAtTime(800, t); lp.frequency.exponentialRampToValueAtTime(6000, t + dur); const v = ctx.createGain(); v.gain.setValueAtTime(0, t); v.gain.linearRampToValueAtTime(g, t + dur); v.gain.linearRampToValueAtTime(0, t + dur + 0.02); o.connect(lp); lp.connect(v); v.connect(master); o.start(t); o.stop(t + dur + 0.05); } function key(t, g) { const n = noiseSrc(t, 0.02); const bp = ctx.createBiquadFilter(); bp.type = 'bandpass'; bp.frequency.value = 2600 + R() * 2600; bp.Q.value = 3; const p = ctx.createStereoPanner(); p.pan.value = R() * 0.5 - 0.25; const v = ctx.createGain(); env(v, t, 0.0008, g * (0.7 + R() * 0.6), 0.012); n.connect(bp); bp.connect(v); v.connect(p); p.connect(master); } // ---- arrangement ---- const cut = scene('scan').start; // the hook's hard cut to black const drop = ENTER_AT; // the Enter key: the groove starts const roll = sub - BAR; // the bar before the Submit card const music = ctx.createGain(); music.gain.value = 1; // the arrangement's gain: silent for the typed command duck.disconnect(); duck.connect(music); drums.disconnect(); drums.connect(music); music.connect(master); music.gain.setValueAtTime(1, 0); music.gain.setValueAtTime(1, cut - 0.01); music.gain.linearRampToValueAtTime(0.0, cut + 0.005); music.gain.setValueAtTime(0.0, drop - 0.02); music.gain.linearRampToValueAtTime(1, drop); duck.gain.setValueAtTime(1, 0); const last = BARS.length - 1; for (let b = 0; b <= last; b++) { const t0 = b * BAR, name = BARS[b], [root, iv] = CH[name]; const tones = [0, iv[1], iv[2], 12, 12 + iv[1], 12 + iv[2], 24].map(x => root + 12 + x); const calmBar = t0 >= sub && t0 < brand, end = b === last, intro = t0 < cut; if (!end) pad(t0, BAR, [root, root + iv[1], root + iv[2], root + 12], calmBar ? 0.06 : intro ? 0.05 : 0.035, calmBar ? 1100 : intro ? 900 : 1500); else pad(t0, BAR * 0.9, [root, root + iv[1], root + iv[2], root + 12], 0.05, 1600); for (let s = 0; s < 16; s++) { const t = t0 + s * BEAT / 4; const beat = s % 4 === 0, off = s % 4 === 2, calm = t >= sub && t < brand; const groove = t >= drop - 0.001 && t < sub && !(t >= roll + BAR / 2); if (!end) { if (calm) { if (s % 2 === 0) arpNote(t, tones[ARP[s]] ?? root, 0.08, 0.3); } else if (t < cut) arpNote(t, tones[ARP[s]] ?? root, 0.07, 0.14); else if (t >= drop) arpNote(t, tones[ARP[s]] ?? root, 0.1, 0.16); } if (intro && s % 2 === 0) hat(t, s % 4 === 0 ? 0.05 : 0.025, 0.1); if (intro && beat) { const o = ctx.createOscillator(); o.type = 'sine'; o.frequency.setValueAtTime(58, t); o.frequency.exponentialRampToValueAtTime(40, t + 0.2); const v = ctx.createGain(); env(v, t, 0.004, 0.35, 0.3); o.connect(v); v.connect(drums); o.start(t); o.stop(t + 0.4); } if (groove) { if (beat) kick(t); if (off) { hat(t, 0.13, 0.2); bass(t, root - 12); } else if (!beat) hat(t, 0.04, -0.2); if (t >= drop + BAR && (s === 4 || s === 12)) clap(t, 0.32); } if (calm && off) hat(t, 0.045, 0.15); } } // snare roll + riser into the Submit card for (let i = 0; i < 8; i++) snare(roll + i * BEAT / 4, 0.04 + 0.09 * i / 7); for (let i = 0; i < 16; i++) snare(roll + BAR / 2 + i * BEAT / 8, 0.12 + 0.16 * i / 15); riser(roll, BAR, 0.06); riser(brand - BAR / 2, BAR / 2, 0.045); // ---- sound design on the cuts ---- // the hook: mails, then the two slams; the hard cut drops to silence with a sub thud for (const t of TICKS.filter(x => x.kind === 'mail').map(x => x.t)) mail(t); impact(B(3), true); stab(B(3), 'Db', 0.07); snare(B(3), 0.3); impact(B(4), true); stab(B(4), 'Fm', 0.09); kick(B(4), 1); clap(B(4), 0.4); riser(B(5), B(2) - 0.02, 0.035); thud(cut, 0.55); // the Enter key click(drop - 0.01); impact(drop, true); stab(drop, 'Fm', 0.07); // every later cut: a whoosh into it and a hit on it for (const c of CUTS) { if (c.kind === 'hard' || c.t === drop) continue; const big = c.id === 'submit' || c.id === 'brand'; if (c.kind.startsWith('whip')) whoosh(c.t - 0.3, 0.32, 0.2, 700, 7500); else if (c.kind === 'iris' || c.kind === 'wipe') whoosh(c.t - 0.22, 0.42, 0.14, 300, 3500); else if (c.kind === 'zoom') whoosh(c.t - 0.36, 0.36, 0.22, 400, 9000); impact(c.t, big); } stab(sub, 'Db', 0.09); stab(brand, 'Fm', 0.1); kick(brand, 1); // ticks: SDKs and the risks line (soft), findings (bad), fixes (good), callouts (pop) for (const x of TICKS) { if (x.kind === 'soft') tick(x.t, 0.12, 2600); else if (x.kind === 'bad') bad(x.t); else if (x.kind === 'good') good(x.t, x.step); else if (x.kind === 'pop') pop(x.t); } // the screenshot wall (tiles pop for 1.5 s) and the Data safety rows const shots = scene('shots').start, decl = scene('decl').start; for (let i = 0; i < 26; i++) tick(shots + 0.14 + i * 0.058, 0.05 + 0.03 * Math.sin(i), 2800 + (i % 5) * 300); for (let i = 0; i < 7; i++) { tick(decl + 0.95 + i * 0.16, 0.12, 2000); blip(decl + 0.95 + i * 0.16, 79 + (i % 3) * 2, 0.035, 0.08); } // the mouse click on "Scan again" in the desktop Checks tab click(scene('desk3').start + DESKTOP.desk3.cursor[1][0] + 0.02); // key clicks: the typed command loud (the only sound there), the re-scan softer for (const t of keyTimes()) key(t, t < drop ? 0.24 : 0.08); const buf = await ctx.startRendering(); const n = Math.round(DURATION * SR); return { sampleRate: SR, left: buf.getChannelData(0).slice(0, n), right: buf.getChannelData(1).slice(0, n) }; } /** 32-bit float stereo WAV, base64. */ export async function renderWav() { const { sampleRate, left, right } = await renderMusic(); const n = left.length, bytes = 44 + n * 8; const ab = new ArrayBuffer(bytes), dv = new DataView(ab); const str = (o, s) => { for (let i = 0; i < s.length; i++) dv.setUint8(o + i, s.charCodeAt(i)); }; str(0, 'RIFF'); dv.setUint32(4, bytes - 8, true); str(8, 'WAVE'); str(12, 'fmt '); dv.setUint32(16, 16, true); dv.setUint16(20, 3, true); dv.setUint16(22, 2, true); dv.setUint32(24, sampleRate, true); dv.setUint32(28, sampleRate * 8, true); dv.setUint16(32, 8, true); dv.setUint16(34, 32, true); str(36, 'data'); dv.setUint32(40, n * 8, true); let peak = 0; for (let i = 0; i < n; i++) { dv.setFloat32(44 + i * 8, left[i], true); dv.setFloat32(48 + i * 8, right[i], true); peak = Math.max(peak, Math.abs(left[i]), Math.abs(right[i])); } const u8 = new Uint8Array(ab); let bin = ''; for (let i = 0; i < u8.length; i += 0x8000) bin += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000)); return { base64: btoa(bin), peak, seconds: n / sampleRate }; }