const btcPrice = parseFloat(document.body.dataset.btcPrice || 'NaN'); const normalizedCoin = Number.isFinite(btcPrice) ? Math.min(Math.max((btcPrice - 15000) / 25000, 0), 1) : 0.5; const pad = document.getElementById('synth-pad'); const indicator = document.getElementById('pad-indicator'); const fmDepthInput = document.getElementById('fm-depth'); const lfoSpeedInput = document.getElementById('lfo-speed'); const textureInput = document.getElementById('texture'); const startBtn = document.getElementById('start-btn'); const randomizeBtn = document.getElementById('randomize-btn'); class MouseSynth { constructor(options = {}) { const AudioContext = window.AudioContext || window.webkitAudioContext; this.ctx = new AudioContext(); this.started = false; this.coinBlend = options.coinBlend ?? 0.5; this.setupNodes(); this.#bindEvents(); } setupNodes() { const ctx = this.ctx; this.masterGain = ctx.createGain(); this.masterGain.gain.value = 0.0; this.carrier = ctx.createOscillator(); this.carrier.type = 'sawtooth'; this.harmonic = ctx.createOscillator(); this.harmonic.type = 'triangle'; this.harmonic.detune.value = 702; // perfect fifth this.fmOsc = ctx.createOscillator(); this.fmGain = ctx.createGain(); this.fmGain.gain.value = 320; this.ampLfo = ctx.createOscillator(); this.ampLfo.type = 'sine'; this.ampLfo.frequency.value = 6; this.ampLfoGain = ctx.createGain(); this.ampLfoGain.gain.value = 0.5; this.filterLfo = ctx.createOscillator(); this.filterLfo.type = 'triangle'; this.filterLfo.frequency.value = 0.5; this.filterLfoGain = ctx.createGain(); this.filterLfoGain.gain.value = 800; this.sampleHold = ctx.createOscillator(); this.sampleHold.type = 'square'; this.sampleHold.frequency.value = 8; this.sampleHoldGain = ctx.createGain(); this.sampleHoldGain.gain.value = 0.0025; this.filter = ctx.createBiquadFilter(); this.filter.type = 'bandpass'; this.filter.frequency.value = 600; this.filter.Q.value = 8; this.delay = ctx.createDelay(1.2); this.delay.delayTime.value = 0.45; this.feedback = ctx.createGain(); this.feedback.gain.value = 0.32; this.noise = this.#createNoise(); this.noiseGain = ctx.createGain(); this.noiseGain.gain.value = 0.0; this.distortion = ctx.createWaveShaper(); this.#setDrive(400); this.coinMorph = ctx.createGain(); this.coinMorph.gain.value = this.coinBlend; this.reverb = ctx.createConvolver(); this.reverb.buffer = this.#makeImpulse(2.5); this.reverbGain = ctx.createGain(); this.reverbGain.gain.value = 0.25; // Connections this.fmOsc.connect(this.fmGain).connect(this.carrier.frequency); this.harmonic.connect(this.filter); this.carrier.connect(this.filter); this.ampLfo.connect(this.ampLfoGain).connect(this.masterGain.gain); this.filterLfo.connect(this.filterLfoGain).connect(this.filter.frequency); this.sampleHold.connect(this.sampleHoldGain).connect(this.filter.detune); this.filter.connect(this.distortion); this.noise.connect(this.noiseGain).connect(this.filter); const wet = ctx.createGain(); const dry = ctx.createGain(); this.distortion.connect(dry).connect(this.masterGain); this.distortion.connect(this.delay); this.delay.connect(this.feedback).connect(this.delay); this.delay.connect(this.coinMorph); this.coinMorph.connect(wet); wet.connect(this.reverb); this.reverb.connect(this.reverbGain).connect(this.masterGain); this.masterGain.connect(ctx.destination); this.carrier.start(); this.harmonic.start(); this.fmOsc.start(); this.ampLfo.start(); this.filterLfo.start(); this.sampleHold.start(); this.noise.start(); } async start() { if (this.started) return; await this.ctx.resume(); this.masterGain.gain.linearRampToValueAtTime(0.8, this.ctx.currentTime + 0.5); this.started = true; } #bindEvents() { fmDepthInput.addEventListener('input', () => { this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value), this.ctx.currentTime, 0.05); }); lfoSpeedInput.addEventListener('input', () => { const rate = parseFloat(lfoSpeedInput.value); this.ampLfo.frequency.setTargetAtTime(rate, this.ctx.currentTime, 0.1); this.filterLfo.frequency.setTargetAtTime(rate * 0.25, this.ctx.currentTime, 0.1); }); textureInput.addEventListener('input', () => { this.#updateTexture(parseFloat(textureInput.value)); }); randomizeBtn.addEventListener('click', () => this.randomize()); } handlePointer(event) { if (!this.started) return; const rect = pad.getBoundingClientRect(); const x = (event.clientX - rect.left) / rect.width; const y = (event.clientY - rect.top) / rect.height; const freq = 120 + (1 - y) * 1080; this.carrier.frequency.setTargetAtTime(freq, this.ctx.currentTime, 0.05); this.harmonic.frequency.setTargetAtTime(freq * 1.5, this.ctx.currentTime, 0.05); this.filter.frequency.setTargetAtTime(200 + x * 5200, this.ctx.currentTime, 0.08); this.filter.Q.setTargetAtTime(4 + y * 18, this.ctx.currentTime, 0.1); this.noiseGain.gain.setTargetAtTime(x * 0.3, this.ctx.currentTime, 0.2); this.sampleHold.frequency.setTargetAtTime(4 + x * 20, this.ctx.currentTime, 0.1); this.delay.delayTime.setTargetAtTime(0.15 + y * 0.6, this.ctx.currentTime, 0.2); this.feedback.gain.setTargetAtTime(0.2 + x * 0.7 * this.coinBlend, this.ctx.currentTime, 0.2); this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + y * 0.6), this.ctx.currentTime, 0.3); this.fmGain.gain.setTargetAtTime(parseFloat(fmDepthInput.value) + x * 200, this.ctx.currentTime, 0.05); this.#updateTexture(textureInput.value, x, y); } handlePointerLeave() { if (!this.started) return; this.masterGain.gain.cancelScheduledValues(this.ctx.currentTime); this.masterGain.gain.setTargetAtTime(0.15, this.ctx.currentTime, 0.5); } randomize() { const fm = 80 + Math.random() * 720; fmDepthInput.value = fm.toFixed(0); this.fmGain.gain.setTargetAtTime(fm, this.ctx.currentTime, 0.1); const lfo = 0.1 + Math.random() * 16; lfoSpeedInput.value = lfo.toFixed(2); this.ampLfo.frequency.setTargetAtTime(lfo, this.ctx.currentTime, 0.2); this.filterLfo.frequency.setTargetAtTime(lfo * 0.3, this.ctx.currentTime, 0.2); const texture = Math.random(); textureInput.value = texture.toFixed(2); this.#updateTexture(texture); } #updateTexture(value, x = 0.5, y = 0.5) { const amount = parseFloat(value); const drive = 150 + amount * 850 + this.coinBlend * 400; this.#setDrive(drive); const morph = amount * (0.6 + this.coinBlend * 0.8); this.distortion.oversample = morph > 0.5 ? '4x' : '2x'; this.reverbGain.gain.setTargetAtTime(0.15 + morph * 0.6, this.ctx.currentTime, 0.3); const filterType = morph > 0.7 ? 'notch' : morph > 0.35 ? 'bandpass' : 'lowpass'; this.filter.type = filterType; this.coinMorph.gain.setTargetAtTime(this.coinBlend * (0.4 + morph), this.ctx.currentTime, 0.3); this.delay.delayTime.setTargetAtTime(0.2 + morph * 0.4 + (x * y) * 0.2, this.ctx.currentTime, 0.2); } #setDrive(amount) { const curve = new Float32Array(1024); for (let i = 0; i < curve.length; i++) { const x = (i / curve.length) * 2 - 1; curve[i] = Math.tanh(x * amount * 0.01); } this.distortion.curve = curve; } #createNoise() { const buffer = this.ctx.createBuffer(1, this.ctx.sampleRate * 4, this.ctx.sampleRate); const data = buffer.getChannelData(0); for (let i = 0; i < data.length; i++) { data[i] = Math.random() * 2 - 1; } const noise = this.ctx.createBufferSource(); noise.buffer = buffer; noise.loop = true; return noise; } #makeImpulse(seconds) { const rate = this.ctx.sampleRate; const length = rate * seconds; const impulse = this.ctx.createBuffer(2, length, rate); for (let ch = 0; ch < 2; ch++) { const data = impulse.getChannelData(ch); for (let i = 0; i < length; i++) { data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2); } } return impulse; } } const synth = new MouseSynth({ coinBlend: normalizedCoin }); startBtn.addEventListener('click', () => synth.start()); pad.addEventListener('pointerdown', async (event) => { await synth.start(); pad.setPointerCapture(event.pointerId); indicator.style.opacity = '1'; }); pad.addEventListener('pointermove', (event) => { indicator.style.left = `${event.offsetX}px`; indicator.style.top = `${event.offsetY}px`; synth.handlePointer(event); }); pad.addEventListener('pointerup', (event) => { pad.releasePointerCapture(event.pointerId); synth.handlePointerLeave(); }); pad.addEventListener('pointerleave', () => synth.handlePointerLeave()); if (!Number.isFinite(btcPrice)) { const status = document.getElementById('btc-status'); if (status) { status.insertAdjacentHTML('beforeend', '