Spatial Audio, Music Systems, and Production Applications with Web Audio API

---html
<button id="play">Play two seconds</button>
---js
let ctx = null;

document.getElementById('play').onclick = () => {
  const Ctx = window.AudioContext || window.webkitAudioContext;
  if (!ctx) ctx = new Ctx();
  if (ctx.state === 'suspended') ctx.resume();

  const osc = ctx.createOscillator();
  osc.frequency.value = 440;
  const volume = ctx.createGain();
  volume.gain.value = 0.3;

  const panner = ctx.createPanner();
  panner.panningModel = 'HRTF';
  panner.positionX.value = 0;    // TODO: set -5, run; then set 5, run
  panner.positionY.value = 0;
  panner.positionZ.value = -1;   // one unit in front of you

  osc.connect(volume);
  volume.connect(panner);
  panner.connect(ctx.destination);
  osc.start();
  osc.stop(ctx.currentTime + 2);
};

---html
<button id="start">Start</button> <button id="stop" disabled>Stop</button>
---js
let ctx = null, osc = null, frame = 0;

document.getElementById('start').onclick = () => {
  const Ctx = window.AudioContext || window.webkitAudioContext;
  if (!ctx) ctx = new Ctx();
  if (ctx.state === 'suspended') ctx.resume();

  osc = ctx.createOscillator();
  osc.type = 'triangle';
  osc.frequency.value = 330;
  const volume = ctx.createGain();
  volume.gain.value = 0.2;
  const panner = ctx.createPanner();
  panner.panningModel = 'HRTF';

  osc.connect(volume); volume.connect(panner); panner.connect(ctx.destination);
  osc.start();

  const begin = ctx.currentTime;
  function move() {
    const angle = ((ctx.currentTime - begin) / 4) * 2 * Math.PI; // one lap per 4 s
    panner.positionX.value = 3 * Math.sin(angle);   // right when positive
    panner.positionZ.value = -3 * Math.cos(angle);  // negative z is in front
    frame = requestAnimationFrame(move);
  }
  move();
  document.getElementById('start').disabled = true;
  document.getElementById('stop').disabled = false;
};

document.getElementById('stop').onclick = () => {
  cancelAnimationFrame(frame);
  osc.stop();
  document.getElementById('start').disabled = false;
  document.getElementById('stop').disabled = true;
};

---html
<div class="container">
	<h1>3D Spatial Audio Example</h1>
	<p>Click the "Start Audio" button, then drag the red sound source around the blue listener to experience 3D spatial audio. Wear headphones and keep your volume low.</p>

	<div class="controls">
		<button id="start-audio">Start Audio</button>

		<div>
			<label for="panning-model">Panning Model:</label>
			<select id="panning-model">
				<option value="HRTF">HRTF (more realistic)</option>
				<option value="equalpower">Equal Power</option>
			</select>
		</div>

		<div>
			<label for="distance-model">Distance Model:</label>
			<select id="distance-model">
				<option value="inverse">Inverse (1/distance)</option>
				<option value="linear">Linear</option>
				<option value="exponential">Exponential</option>
			</select>
		</div>

		<div>
			<label for="rolloff-factor">Rolloff Factor: <span id="rolloff-value">1</span></label>
			<input type="range" id="rolloff-factor" min="0" max="5" step="0.1" value="1">
		</div>
	</div>

	<div class="playground" id="playground">
		<div class="listener" id="listener"></div>
		<div class="sound-source" id="sound-source"></div>
	</div>
</div>
---css
:root {
	color-scheme: light dark;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.controls {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 500px;
}

.playground {
	width: 100%;
	height: 300px;
	position: relative;
	border: 1px solid #666;
	border-radius: 8px;
	margin-top: 20px;
	overflow: hidden;
}

.listener {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #3498db;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.sound-source {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: #e74c3c;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
	z-index: 1;
}

label {
	display: block;
	margin-bottom: 5px;
}

button {
	padding: 8px 15px;
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px;
}

button:hover {
	background-color: #2980b9;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	.playground {
		border-color: #444;
		background-color: #1e1e1e;
	}

	button {
		background-color: #2980b9;
	}

	button:hover {
		background-color: #3498db;
	}
}
---js
document.addEventListener("DOMContentLoaded", function () {
  let audioContext;
  let panner;
  let oscillator;
  let isPlaying = false;

  const playground = document.getElementById("playground");
  const listener = document.getElementById("listener");
  const soundSource = document.getElementById("sound-source");
  const startButton = document.getElementById("start-audio");
  const panningModelSelect = document.getElementById("panning-model");
  const distanceModelSelect = document.getElementById("distance-model");
  const rolloffFactorInput = document.getElementById("rolloff-factor");
  const rolloffValue = document.getElementById("rolloff-value");

  // Initialize positions
  const playgroundRect = playground.getBoundingClientRect();
  const listenerX = playgroundRect.width / 2;
  const listenerY = playgroundRect.height / 2;

  listener.style.left = `${listenerX}px`;
  listener.style.top = `${listenerY}px`;

  soundSource.style.left = `${listenerX + 100}px`;
  soundSource.style.top = `${listenerY}px`;

  // Initialize audio context and panner
  function initAudio() {
    audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // Create oscillator
    oscillator = audioContext.createOscillator();
    oscillator.type = "sine";
    oscillator.frequency.value = 440;

    // Create panner node
    panner = audioContext.createPanner();
    updatePannerSettings();

    // Connect nodes (a gain node keeps the tone quiet)
    const volume = audioContext.createGain();
    volume.gain.value = 0.2;
    oscillator.connect(volume);
    volume.connect(panner);
    panner.connect(audioContext.destination);

    // Start oscillator
    oscillator.start();
    isPlaying = true;

    // Update positions
    updatePositions();
  }

  function updatePannerSettings() {
    if (!panner) return;

    panner.panningModel = panningModelSelect.value;
    panner.distanceModel = distanceModelSelect.value;
    panner.rolloffFactor = parseFloat(rolloffFactorInput.value);

    // Position listener at center of playground
    const listener = audioContext.listener;

    // Set listener position (always at center)
    if (listener.positionX) {
      // Modern API
      listener.positionX.value = 0;
      listener.positionY.value = 0;
      listener.positionZ.value = 0;
    } else {
      // Legacy API
      listener.setPosition(0, 0, 0);
    }

    updatePositions();
  }

  function updatePositions() {
    if (!panner || !audioContext) return;

    const playgroundRect = playground.getBoundingClientRect();
    const listenerX = playgroundRect.width / 2;
    const listenerY = playgroundRect.height / 2;

    const soundSourceRect = soundSource.getBoundingClientRect();
    const soundX =
    soundSourceRect.left + soundSourceRect.width / 2 - playgroundRect.left;
    const soundY =
    soundSourceRect.top + soundSourceRect.height / 2 - playgroundRect.top;

    // Calculate position relative to listener
    const posX = (soundX - listenerX) / 50; // Scale down for better sound positioning
    const posY = 0; // Keep on same Y plane for simplicity
    const posZ = (soundY - listenerY) / 50; // Map Y position to Z in audio space

    // Set panner position
    if (panner.positionX) {
      // Modern API
      panner.positionX.value = posX;
      panner.positionY.value = posY;
      panner.positionZ.value = posZ;
    } else {
      // Legacy API
      panner.setPosition(posX, posY, posZ);
    }
  }

  // Make the sound source draggable
  let isDragging = false;

  soundSource.addEventListener("mousedown", function (e) {
    isDragging = true;
    e.preventDefault();
  });

  document.addEventListener("mousemove", function (e) {
    if (!isDragging) return;

    const playgroundRect = playground.getBoundingClientRect();

    // Constrain to playground boundaries
    let newX = Math.max(
    0,
    Math.min(playgroundRect.width, e.clientX - playgroundRect.left));

    let newY = Math.max(
    0,
    Math.min(playgroundRect.height, e.clientY - playgroundRect.top));


    soundSource.style.left = `${newX}px`;
    soundSource.style.top = `${newY}px`;

    updatePositions();
  });

  document.addEventListener("mouseup", function () {
    isDragging = false;
  });

  // Event listeners
  startButton.addEventListener("click", function () {
    if (!isPlaying) {
      initAudio();
      this.textContent = "Audio Started";
      this.disabled = true;
    }
  });

  panningModelSelect.addEventListener("change", updatePannerSettings);
  distanceModelSelect.addEventListener("change", updatePannerSettings);

  rolloffFactorInput.addEventListener("input", function () {
    rolloffValue.textContent = this.value;
    updatePannerSettings();
  });

  // Handle window resize
  window.addEventListener("resize", function () {
    // Reposition elements after resize
    const playgroundRect = playground.getBoundingClientRect();
    const listenerX = playgroundRect.width / 2;
    const listenerY = playgroundRect.height / 2;

    listener.style.left = `${listenerX}px`;
    listener.style.top = `${listenerY}px`;

    updatePositions();
  });
});

---html
<button id="slow">60 BPM</button>
<button id="fast">180 BPM</button>
---js
let ctx = null;

function clicks(bpm) {
  const Ctx = window.AudioContext || window.webkitAudioContext;
  if (!ctx) ctx = new Ctx();
  if (ctx.state === 'suspended') ctx.resume();

  const secondsPerBeat = 60 / bpm;
  const first = ctx.currentTime + 0.1;
  console.log(bpm + ' BPM: ' + secondsPerBeat.toFixed(3) + ' s between clicks');

  for (let beat = 0; beat < 6; beat++) {
    const when = first + beat * secondsPerBeat;   // exact time on the audio clock
    const osc = ctx.createOscillator();
    osc.frequency.value = beat % 4 === 0 ? 1000 : 700;  // accent every fourth click
    const volume = ctx.createGain();
    volume.gain.value = 0.2;
    osc.connect(volume);
    volume.connect(ctx.destination);
    osc.start(when);
    osc.stop(when + 0.05);
    console.log('click ' + (beat + 1) + ' due at ' + when.toFixed(3) + ' s');
  }
}
document.getElementById('slow').onclick = () => clicks(60);
document.getElementById('fast').onclick = () => clicks(180);

---html
<div class="container">
	<h1>Web Audio Metronome</h1>
	<p>A precise metronome using Web Audio API's high-precision timing</p>

	<div class="tempo-display" id="tempo-display">120 BPM</div>

	<div class="controls">
		<div>
			<label for="tempo-slider">Tempo:</label>
			<input type="range" id="tempo-slider" min="40" max="240" step="1" value="120">
		</div>

		<div>
			<label for="time-signature">Time Signature:</label>
			<select id="time-signature">
				<option value="2">2/4</option>
				<option value="3">3/4</option>
				<option value="4" selected>4/4</option>
				<option value="5">5/4</option>
				<option value="6">6/8</option>
				<option value="7">7/8</option>
			</select>
		</div>

		<button id="start-stop">Start</button>
	</div>

	<div class="metronome-visual" id="metronome-visual">
		<!-- Beats will be added here dynamically -->
	</div>
</div>
---css
:root {
	color-scheme: light dark;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.controls {
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 400px;
}

.metronome-visual {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 400px;
	margin: 20px 0;
}

.beat {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #555;
	transition: background-color 0.05s ease;
}

.beat.active {
	background-color: #e74c3c;
}

.beat.accent {
	border: 2px solid #e74c3c;
}

button {
	padding: 8px 15px;
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px 0;
}

button:hover {
	background-color: #2980b9;
}

.tempo-display {
	font-size: 2em;
	font-weight: bold;
	margin: 10px 0;
}

label {
	display: block;
	margin-bottom: 5px;
}

select,
input {
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ddd;
	background-color: #f8f8f8;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	.beat {
		background-color: #333;
	}

	select,
	input {
		background-color: #2a2a2a;
		border-color: #444;
		color: #e0e0e0;
	}

	button {
		background-color: #2980b9;
	}

	button:hover {
		background-color: #3498db;
	}
}
---js
document.addEventListener("DOMContentLoaded", function () {
  let audioContext;
  let metronome;
  let isPlaying = false;

  const startStopButton = document.getElementById("start-stop");
  const tempoSlider = document.getElementById("tempo-slider");
  const tempoDisplay = document.getElementById("tempo-display");
  const timeSignature = document.getElementById("time-signature");
  const metronomeVisual = document.getElementById("metronome-visual");

  // Metronome class for precise timing
  class Metronome {
    constructor(audioContext, tempo = 120, beatsPerMeasure = 4) {
      this.audioContext = audioContext;
      this.tempo = tempo;
      this.beatsPerMeasure = beatsPerMeasure;
      this.isPlaying = false;
      this.currentBeat = 0;

      // Scheduling parameters
      this.lookahead = 25; // How often to call scheduling function (in milliseconds)
      this.scheduleAheadTime = 0.1; // How far ahead to schedule audio (in seconds)
      this.nextNoteTime = 0; // When the next note is due
      this.timerID = null; // setTimeout identifier

      // Create click sounds
      this.clickHighBuffer = this.createClickBuffer(1000, 0.05); // Accent click
      this.clickLowBuffer = this.createClickBuffer(700, 0.05); // Regular click

      // Callback for beat change
      this.onBeatChange = null;
    }

    createClickBuffer(frequency, duration) {
      const sampleRate = this.audioContext.sampleRate;
      const buffer = this.audioContext.createBuffer(
      1,
      sampleRate * duration,
      sampleRate);

      const channelData = buffer.getChannelData(0);

      // Create a simple percussive envelope
      for (let i = 0; i < buffer.length; i++) {
        const t = i / sampleRate;
        // Sine wave with exponential decay
        channelData[i] = Math.sin(2 * Math.PI * frequency * t) * Math.exp(-8 * t);
      }

      return buffer;
    }

    nextNote() {
      // Advance current note and time by a quarter note
      const secondsPerBeat = 60.0 / this.tempo;
      this.nextNoteTime += secondsPerBeat;

      // Advance the beat number
      this.currentBeat = (this.currentBeat + 1) % this.beatsPerMeasure;
    }

    scheduleNote(beatNumber, time) {
      // Create source for click sound
      const source = this.audioContext.createBufferSource();

      // Use accent click for first beat, regular click for others
      source.buffer =
      beatNumber === 0 ? this.clickHighBuffer : this.clickLowBuffer;

      // Connect to output
      source.connect(this.audioContext.destination);

      // Play sound at exact time
      source.start(time);

      // Call beat change callback if set
      if (this.onBeatChange) {
        // Use setTimeout to synchronize with sound as closely as possible
        const currentTime = this.audioContext.currentTime;
        const timeUntilNote = (time - currentTime) * 1000;
        setTimeout(() => this.onBeatChange(beatNumber), timeUntilNote);
      }
    }

    scheduler() {
      // Schedule notes until the look-ahead period
      while (
      this.nextNoteTime <
      this.audioContext.currentTime + this.scheduleAheadTime)
      {
        this.scheduleNote(this.currentBeat, this.nextNoteTime);
        this.nextNote();
      }

      // Call scheduler again after lookahead time
      this.timerID = setTimeout(() => this.scheduler(), this.lookahead);
    }

    start() {
      if (this.isPlaying) return;

      // Start from current time
      this.isPlaying = true;
      this.currentBeat = this.beatsPerMeasure - 1; // Start one before so first beat is 0
      this.nextNoteTime = this.audioContext.currentTime;

      // Start scheduling
      this.scheduler();
    }

    stop() {
      this.isPlaying = false;
      clearTimeout(this.timerID);
    }

    setTempo(newTempo) {
      this.tempo = newTempo;
    }

    setBeatsPerMeasure(beats) {
      this.beatsPerMeasure = beats;
      // Reset current beat if it's now out of range
      if (this.currentBeat >= beats) {
        this.currentBeat = 0;
      }
    }}


  // Setup metronome visuals based on time signature
  function setupMetronomeVisual(beatsPerMeasure) {
    metronomeVisual.innerHTML = "";

    for (let i = 0; i < beatsPerMeasure; i++) {
      const beat = document.createElement("div");
      beat.className = "beat";

      // Mark first beat as accent
      if (i === 0) {
        beat.classList.add("accent");
      }

      metronomeVisual.appendChild(beat);
    }
  }

  // Initialize audio and metronome
  function init() {
    // Create audio context
    audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // Create metronome
    const beatsPerMeasure = parseInt(timeSignature.value);
    metronome = new Metronome(
    audioContext,
    parseInt(tempoSlider.value),
    beatsPerMeasure);


    // Setup visual beats
    setupMetronomeVisual(beatsPerMeasure);

    // Set beat change callback
    metronome.onBeatChange = function (beatNumber) {
      // Remove active class from all beats
      const beats = metronomeVisual.querySelectorAll(".beat");
      beats.forEach(beat => beat.classList.remove("active"));

      // Add active class to current beat
      beats[beatNumber].classList.add("active");
    };
  }

  // Event listeners
  startStopButton.addEventListener("click", function () {
    // Initialize on first click
    if (!audioContext) {
      init();
    }

    if (isPlaying) {
      metronome.stop();
      this.textContent = "Start";
      isPlaying = false;

      // Remove active class from all beats
      const beats = metronomeVisual.querySelectorAll(".beat");
      beats.forEach(beat => beat.classList.remove("active"));
    } else {
      metronome.start();
      this.textContent = "Stop";
      isPlaying = true;
    }
  });

  tempoSlider.addEventListener("input", function () {
    const tempo = parseInt(this.value);
    tempoDisplay.textContent = `${tempo} BPM`;

    if (metronome) {
      metronome.setTempo(tempo);
    }
  });

  timeSignature.addEventListener("change", function () {
    const beatsPerMeasure = parseInt(this.value);

    // Update visual representation
    setupMetronomeVisual(beatsPerMeasure);

    // Update metronome if initialized
    if (metronome) {
      metronome.setBeatsPerMeasure(beatsPerMeasure);
    }
  });

  // Initial setup
  setupMetronomeVisual(parseInt(timeSignature.value));
});

---html
<div class="container">
	<h1>Audio Analyzer & Visualizer</h1>
	<p>Real-time audio analysis using Web Audio API's AnalyserNode. Wear headphones and keep your volume low. The microphone is analysed but never played back, so it cannot squeal.</p>

	<div class="controls">
		<div class="control-group">
			<button id="mic-button">Use Microphone</button>
			<p>- or -</p>
			<button id="oscillator-button">Use Oscillator</button>

			<div id="oscillator-controls" style="display: none; margin-top: 10px;">
				<label for="waveform">Waveform:</label>
				<select id="waveform">
					<option value="sine">Sine</option>
					<option value="square">Square</option>
					<option value="sawtooth">Sawtooth</option>
					<option value="triangle">Triangle</option>
				</select>

				<label for="frequency">Frequency: <span id="frequency-value">440</span> Hz</label>
				<input type="range" id="frequency" min="20" max="2000" step="1" value="440">
			</div>
		</div>

		<div class="control-group">
			<label for="fft-size">FFT Size:</label>
			<select id="fft-size">
				<option value="32">32</option>
				<option value="64">64</option>
				<option value="128">128</option>
				<option value="256">256</option>
				<option value="512">512</option>
				<option value="1024">1024</option>
				<option value="2048" selected>2048</option>
				<option value="4096">4096</option>
				<option value="8192">8192</option>
				<option value="16384">16384</option>
			</select>

			<label for="smoothing">Smoothing:</label>
			<input type="range" id="smoothing" min="0" max="0.95" step="0.05" value="0.8">
			<span id="smoothing-value">0.8</span>
		</div>
	</div>

	<div class="visualizers">
		<div class="visualizer-container">
			<h2>Frequency Spectrum</h2>
			<canvas id="frequency-canvas"></canvas>
		</div>

		<div class="visualizer-container">
			<h2>Waveform</h2>
			<canvas id="waveform-canvas"></canvas>
		</div>
	</div>

	<div class="info">
		<h3>Audio Information</h3>
		<p id="audio-info">Connect an audio source to see analysis data.</p>
	</div>
</div>
---css
:root {
	color-scheme: light dark;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.visualizers {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 20px;
	margin-top: 20px;
}

.visualizer-container {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

canvas {
	display: block;
	width: 100%;
	height: 150px;
	background-color: rgba(0, 0, 0, 0.1);
}

.controls {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}

.control-group {
	flex: 1;
	min-width: 200px;
}

button {
	padding: 8px 15px;
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px 0;
}

button:hover {
	background-color: #2980b9;
}

label {
	display: block;
	margin-bottom: 5px;
}

select,
input {
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.info {
	margin-top: 20px;
	padding: 15px;
	border-radius: 8px;
	background-color: rgba(52, 152, 219, 0.1);
}

.info h3 {
	margin-top: 0;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	canvas {
		background-color: rgba(255, 255, 255, 0.05);
	}

	select,
	input {
		background-color: #2a2a2a;
		border-color: #444;
		color: #e0e0e0;
	}

	button {
		background-color: #2980b9;
	}

	button:hover {
		background-color: #3498db;
	}

	.info {
		background-color: rgba(52, 152, 219, 0.2);
	}
}
---js
document.addEventListener("DOMContentLoaded", function () {
  let audioContext;
  let analyser;
  let source;
  let isPlaying = false;
  let isUsingMic = false;
  let oscillator;

  const micButton = document.getElementById("mic-button");
  const oscillatorButton = document.getElementById("oscillator-button");
  const oscillatorControls = document.getElementById("oscillator-controls");
  const waveformSelect = document.getElementById("waveform");
  const frequencySlider = document.getElementById("frequency");
  const frequencyValue = document.getElementById("frequency-value");
  const fftSizeSelect = document.getElementById("fft-size");
  const smoothingSlider = document.getElementById("smoothing");
  const smoothingValue = document.getElementById("smoothing-value");
  const frequencyCanvas = document.getElementById("frequency-canvas");
  const waveformCanvas = document.getElementById("waveform-canvas");
  const audioInfo = document.getElementById("audio-info");

  const freqCtx = frequencyCanvas.getContext("2d");
  const waveCtx = waveformCanvas.getContext("2d");

  // Resize canvases to match display size
  function resizeCanvases() {
    [frequencyCanvas, waveformCanvas].forEach(canvas => {
      canvas.width = canvas.clientWidth * window.devicePixelRatio;
      canvas.height = canvas.clientHeight * window.devicePixelRatio;
    });
  }

  // Output level: the oscillator is played quietly; the microphone is never played
  // back through the speakers (that would make a loud feedback howl).
  let outputGain = null;

  // Initialize audio context and analyzer
  function initAudio() {
    if (audioContext) return;

    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    analyser = audioContext.createAnalyser();

    // Set initial analyser properties
    analyser.fftSize = parseInt(fftSizeSelect.value);
    analyser.smoothingTimeConstant = parseFloat(smoothingSlider.value);

    // Connect analyser to destination through a quiet output gain
    outputGain = audioContext.createGain();
    outputGain.gain.value = 0.2;
    analyser.connect(outputGain);
    outputGain.connect(audioContext.destination);
  }

  // Update analyser settings
  function updateAnalyserSettings() {
    if (!analyser) return;

    analyser.fftSize = parseInt(fftSizeSelect.value);
    analyser.smoothingTimeConstant = parseFloat(smoothingSlider.value);
  }

  // Start microphone input
  async function startMicrophone() {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });

      // Initialize if needed
      initAudio();
      outputGain.gain.value = 0; // microphone: analyze it, but do not play it

      // Disconnect any existing source
      if (source) {
        source.disconnect();
      }

      if (oscillator) {
        oscillator.stop();
        oscillator = null;
      }

      // Create and connect microphone source
      source = audioContext.createMediaStreamSource(stream);
      source.connect(analyser);

      isPlaying = true;
      isUsingMic = true;
      micButton.textContent = "Microphone Active";
      oscillatorButton.textContent = "Use Oscillator";
      oscillatorControls.style.display = "none";

      // Start visualization
      startVisualization();

      // Update info
      updateAudioInfo();
    } catch (error) {
      console.error("Error accessing microphone:", error);
      alert(
      "Could not access microphone. Please check permissions and try again.");

    }
  }

  // Start oscillator
  function startOscillator() {
    // Initialize if needed
    initAudio();

    // Disconnect any existing source
    if (source) {
      source.disconnect();
    }

    if (oscillator) {
      oscillator.stop();
    }

    // Create and connect oscillator
    oscillator = audioContext.createOscillator();
    oscillator.type = waveformSelect.value;
    oscillator.frequency.value = parseInt(frequencySlider.value);

    source = oscillator;
    oscillator.connect(analyser);
    outputGain.gain.value = 0.2; // oscillator: quiet

    // Start oscillator
    oscillator.start();

    isPlaying = true;
    isUsingMic = false;
    oscillatorButton.textContent = "Oscillator Active";
    micButton.textContent = "Use Microphone";
    oscillatorControls.style.display = "block";

    // Start visualization
    startVisualization();

    // Update info
    updateAudioInfo();
  }

  // Stop all audio
  function stopAudio() {
    if (!isPlaying) return;

    if (source) {
      source.disconnect();
    }

    if (oscillator) {
      oscillator.stop();
      oscillator = null;
    }

    isPlaying = false;
    micButton.textContent = "Use Microphone";
    oscillatorButton.textContent = "Use Oscillator";

    // Stop visualization
    cancelAnimationFrame(animationId);
  }

  // Draw frequency spectrum
  function drawFrequencySpectrum() {
    const width = frequencyCanvas.width;
    const height = frequencyCanvas.height;

    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);

    analyser.getByteFrequencyData(dataArray);

    freqCtx.clearRect(0, 0, width, height);

    const barWidth = width / bufferLength;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
      const percent = dataArray[i] / 255;
      const barHeight = height * percent;

      // Create gradient coloring based on frequency
      const hue = i / bufferLength * 360;
      freqCtx.fillStyle = `hsl(${hue}, 100%, 50%)`;

      freqCtx.fillRect(x, height - barHeight, barWidth, barHeight);

      x += barWidth;
    }
  }

  // Draw waveform
  function drawWaveform() {
    const width = waveformCanvas.width;
    const height = waveformCanvas.height;

    const bufferLength = analyser.fftSize;
    const dataArray = new Uint8Array(bufferLength);

    analyser.getByteTimeDomainData(dataArray);

    waveCtx.clearRect(0, 0, width, height);

    waveCtx.lineWidth = 2;
    waveCtx.strokeStyle = "#00FFFF";
    waveCtx.beginPath();

    const sliceWidth = width / bufferLength;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
      const v = dataArray[i] / 128.0;
      const y = v * height / 2;

      if (i === 0) {
        waveCtx.moveTo(x, y);
      } else {
        waveCtx.lineTo(x, y);
      }

      x += sliceWidth;
    }

    waveCtx.lineTo(width, height / 2);
    waveCtx.stroke();
  }

  // Calculate and display dominant frequency
  function updateAudioInfo() {
    if (!analyser || !isPlaying) {
      audioInfo.textContent = "Connect an audio source to see analysis data.";
      return;
    }

    // Get frequency data
    const bufferLength = analyser.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    analyser.getByteFrequencyData(dataArray);

    // Find the maximum
    let maxIndex = 0;
    let maxValue = 0;
    let total = 0;
    let count = 0;

    for (let i = 0; i < bufferLength; i++) {
      total += dataArray[i];

      if (dataArray[i] > 0) {
        count++;
      }

      if (dataArray[i] > maxValue) {
        maxIndex = i;
        maxValue = dataArray[i];
      }
    }

    // Convert bin index to frequency (Hz)
    const dominantFrequency =
    maxIndex * audioContext.sampleRate / analyser.fftSize;
    const averageEnergy = count > 0 ? total / count : 0;

    // Format info text
    let infoText = "";

    if (isUsingMic) {
      infoText += "Source: Microphone\n";
    } else {
      infoText += `Source: Oscillator (${waveformSelect.value} wave @ ${frequencySlider.value} Hz)\n`;
    }

    infoText += `Sample Rate: ${audioContext.sampleRate} Hz\n`;
    infoText += `FFT Size: ${analyser.fftSize} (${analyser.frequencyBinCount} bins)\n`;
    infoText += `Dominant Frequency: ${dominantFrequency.toFixed(1)} Hz\n`;
    infoText += `Average Energy: ${averageEnergy.toFixed(1)} / 255`;

    audioInfo.textContent = infoText;
  }

  let animationId;

  // Start visualization loop
  function startVisualization() {
    function visualize() {
      drawFrequencySpectrum();
      drawWaveform();
      updateAudioInfo();

      animationId = requestAnimationFrame(visualize);
    }

    visualize();
  }

  // Event listeners
  micButton.addEventListener("click", function () {
    if (isPlaying && isUsingMic) {
      stopAudio();
    } else {
      startMicrophone();
    }
  });

  oscillatorButton.addEventListener("click", function () {
    if (isPlaying && !isUsingMic) {
      stopAudio();
    } else {
      startOscillator();
    }
  });

  waveformSelect.addEventListener("change", function () {
    if (oscillator) {
      oscillator.type = this.value;
      updateAudioInfo();
    }
  });

  frequencySlider.addEventListener("input", function () {
    frequencyValue.textContent = this.value;

    if (oscillator) {
      oscillator.frequency.value = parseInt(this.value);
      updateAudioInfo();
    }
  });

  fftSizeSelect.addEventListener("change", updateAnalyserSettings);

  smoothingSlider.addEventListener("input", function () {
    smoothingValue.textContent = this.value;
    updateAnalyserSettings();
  });

  // Handle window resize
  window.addEventListener("resize", resizeCanvases);

  // Initial setup
  resizeCanvases();
});

---html
<button id="play">Play three MIDI notes</button>
---js
let ctx = null;
// Each message is [status, note, velocity]. 0x90 means "note on".
const messages = [[0x90, 60, 100], [0x90, 64, 100], [0x90, 67, 100]];
// TODO: add [0x90, 72, 100] to the end, then run it again

function noteOn(note, velocity, when) {
  const frequency = 440 * Math.pow(2, (note - 69) / 12);  // MIDI note -> Hz
  const osc = ctx.createOscillator();
  osc.type = 'triangle';
  osc.frequency.value = frequency;
  const volume = ctx.createGain();
  volume.gain.value = (velocity / 127) * 0.3;              // harder hit = louder, but gentle
  osc.connect(volume);
  volume.connect(ctx.destination);
  osc.start(when);
  osc.stop(when + 0.4);
  console.log('note ' + note + ' -> ' + frequency.toFixed(1) + ' Hz');
}

document.getElementById('play').onclick = () => {
  const Ctx = window.AudioContext || window.webkitAudioContext;
  if (!ctx) ctx = new Ctx();
  if (ctx.state === 'suspended') ctx.resume();
  messages.forEach(([status, note, velocity], i) => {
    if ((status >> 4) === 0x9 && velocity > 0) noteOn(note, velocity, ctx.currentTime + i * 0.5);
  });
};

---html
<div class="container">
	<h1>Web MIDI Synthesizer</h1>
	<p>Connect a MIDI device or use the on-screen keyboard to play sounds with Web Audio API</p>

	<div class="controls">
		<div class="control-group">
			<h2>MIDI Input</h2>
			<button id="enable-midi">Enable MIDI</button>

			<div id="midi-status">MIDI not initialized</div>

			<label for="midi-input" id="midi-input-label" style="display: none;">MIDI Input Device:</label>
			<select id="midi-input" style="display: none;"></select>
		</div>

		<div class="control-group">
			<h2>Synthesizer Settings</h2>

			<label for="waveform">Waveform:</label>
			<select id="waveform">
				<option value="sine">Sine</option>
				<option value="square">Square</option>
				<option value="sawtooth" selected>Sawtooth</option>
				<option value="triangle">Triangle</option>
			</select>

			<label for="attack">Attack: <span id="attack-value">0.05</span>s</label>
			<input type="range" id="attack" min="0.01" max="1" step="0.01" value="0.05">

			<label for="release">Release: <span id="release-value">0.2</span>s</label>
			<input type="range" id="release" min="0.01" max="1" step="0.01" value="0.2">

			<label for="filter-cutoff">Filter Cutoff: <span id="filter-cutoff-value">2000</span> Hz</label>
			<input type="range" id="filter-cutoff" min="60" max="10000" step="1" value="2000">

			<label for="filter-resonance">Filter Resonance: <span id="filter-resonance-value">2</span></label>
			<input type="range" id="filter-resonance" min="0.1" max="20" step="0.1" value="2">
		</div>
	</div>

	<div class="piano" id="piano">
		<!-- Keys will be added dynamically -->
	</div>

	<h2>MIDI Messages</h2>
	<div class="midi-message" id="midi-messages"></div>
</div>
---css
:root {
	color-scheme: light dark;
}

body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		sans-serif;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	line-height: 1.6;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.controls {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	width: 100%;
}

.control-group {
	flex: 1;
	min-width: 250px;
	padding: 15px;
	border-radius: 8px;
	background-color: rgba(0, 0, 0, 0.05);
}

.piano {
	width: 100%;
	height: 200px;
	margin: 20px 0;
	position: relative;
}

.key {
	position: absolute;
	height: 100%;
	border-radius: 0 0 5px 5px;
	cursor: pointer;
	box-sizing: border-box;
}

.white-key {
	background-color: white;
	border: 1px solid #aaa;
	z-index: 1;
}

.white-key.active {
	background-color: #ccc;
}

.black-key {
	background-color: #222;
	height: 65%;
	z-index: 2;
}

.black-key.active {
	background-color: #555;
}

.note-label {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 12px;
	color: #333;
}

.black-key .note-label {
	color: #fff;
	bottom: 5px;
}

.midi-message {
	width: 100%;
	height: 150px;
	overflow-y: auto;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 10px;
	border-radius: 5px;
	font-family: monospace;
	margin-top: 20px;
}

.midi-message-entry {
	margin: 5px 0;
	padding: 5px;
	border-radius: 3px;
}

.midi-message-entry.note-on {
	background-color: rgba(46, 204, 113, 0.2);
}

.midi-message-entry.note-off {
	background-color: rgba(231, 76, 60, 0.2);
}

.midi-message-entry.cc {
	background-color: rgba(52, 152, 219, 0.2);
}

button {
	padding: 8px 15px;
	background-color: #3498db;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	margin: 5px 0;
}

button:hover {
	background-color: #2980b9;
}

label {
	display: block;
	margin-bottom: 5px;
}

select,
input {
	width: 100%;
	padding: 8px;
	border-radius: 4px;
	border: 1px solid #ddd;
	margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	.control-group {
		background-color: rgba(255, 255, 255, 0.05);
	}

	.midi-message {
		background-color: rgba(255, 255, 255, 0.05);
		color: #e0e0e0;
	}

	.white-key {
		background-color: #e0e0e0;
	}

	.white-key .note-label {
		color: #333;
	}

	.white-key.active {
		background-color: #aaa;
	}

	.black-key {
		background-color: #222;
	}

	.black-key.active {
		background-color: #555;
	}

	select,
	input {
		background-color: #2a2a2a;
		border-color: #444;
		color: #e0e0e0;
	}

	button {
		background-color: #2980b9;
	}

	button:hover {
		background-color: #3498db;
	}

	.midi-message-entry.note-on {
		background-color: rgba(46, 204, 113, 0.3);
	}

	.midi-message-entry.note-off {
		background-color: rgba(231, 76, 60, 0.3);
	}

	.midi-message-entry.cc {
		background-color: rgba(52, 152, 219, 0.3);
	}
}
---js
document.addEventListener("DOMContentLoaded", function () {
  let audioContext;
  let midiAccess;
  let activeInput = null;
  let activeNotes = new Map();
  let synth;

  const enableMidiButton = document.getElementById("enable-midi");
  const midiStatusElement = document.getElementById("midi-status");
  const midiInputSelect = document.getElementById("midi-input");
  const midiInputLabel = document.getElementById("midi-input-label");
  const waveformSelect = document.getElementById("waveform");
  const attackSlider = document.getElementById("attack");
  const attackValue = document.getElementById("attack-value");
  const releaseSlider = document.getElementById("release");
  const releaseValue = document.getElementById("release-value");
  const filterCutoffSlider = document.getElementById("filter-cutoff");
  const filterCutoffValue = document.getElementById("filter-cutoff-value");
  const filterResonanceSlider = document.getElementById("filter-resonance");
  const filterResonanceValue = document.getElementById("filter-resonance-value");
  const pianoElement = document.getElementById("piano");
  const midiMessagesElement = document.getElementById("midi-messages");

  // Piano key definitions - with exact positioning information
  // Format: [note, type, label, startPosition(%), width(%)]
  const keys = [
  [60, "white", "C3", 0, 7], // C3
  [61, "black", "C#3", 5, 4], // C#3
  [62, "white", "D3", 7, 7], // D3
  [63, "black", "D#3", 12, 4], // D#3
  [64, "white", "E3", 14, 7], // E3
  [65, "white", "F3", 21, 7], // F3
  [66, "black", "F#3", 26, 4], // F#3
  [67, "white", "G3", 28, 7], // G3
  [68, "black", "G#3", 33, 4], // G#3
  [69, "white", "A3", 35, 7], // A3
  [70, "black", "A#3", 40, 4], // A#3
  [71, "white", "B3", 42, 7], // B3
  [72, "white", "C4", 49, 7], // C4
  [73, "black", "C#4", 54, 4], // C#4
  [74, "white", "D4", 56, 7], // D4
  [75, "black", "D#4", 61, 4], // D#4
  [76, "white", "E4", 63, 7], // E4
  [77, "white", "F4", 70, 7], // F4
  [78, "black", "F#4", 75, 4], // F#4
  [79, "white", "G4", 77, 7], // G4
  [80, "black", "G#4", 82, 4], // G#4
  [81, "white", "A4", 84, 7], // A4
  [82, "black", "A#4", 89, 4], // A#4
  [83, "white", "B4", 91, 7] // B4
  ];

  // Synthesizer class
  class Synthesizer {
    constructor(audioContext) {
      this.audioContext = audioContext;
      this.activeNotes = new Map();
    }

    // Convert MIDI note number to frequency
    noteToFrequency(note) {
      return 440.0 * Math.pow(2, (note - 69) / 12);
    }

    playNote(note, velocity = 127) {
      const frequency = this.noteToFrequency(note);

      // If note is already playing, stop it first
      if (this.activeNotes.has(note)) {
        this.stopNote(note);
      }

      // Create oscillator
      const oscillator = this.audioContext.createOscillator();
      oscillator.type = waveformSelect.value;
      oscillator.frequency.value = frequency;

      // Create filter
      const filter = this.audioContext.createBiquadFilter();
      filter.type = "lowpass";
      filter.frequency.value = parseFloat(filterCutoffSlider.value);
      filter.Q.value = parseFloat(filterResonanceSlider.value);

      // Create gain node for envelope
      const gainNode = this.audioContext.createGain();
      gainNode.gain.value = 0;

      // Connect nodes
      oscillator.connect(filter);
      filter.connect(gainNode);
      gainNode.connect(this.audioContext.destination);

      // Apply attack
      const attackTime = parseFloat(attackSlider.value);
      const now = this.audioContext.currentTime;

      gainNode.gain.setValueAtTime(0, now);
      gainNode.gain.linearRampToValueAtTime(velocity / 127, now + attackTime);

      // Start oscillator
      oscillator.start();

      // Store active note
      this.activeNotes.set(note, {
        oscillator,
        gainNode,
        filter,
        velocity });


      // Update UI
      const keyElement = document.querySelector(`.key[data-note="${note}"]`);
      if (keyElement) {
        keyElement.classList.add("active");
      }
    }

    stopNote(note) {
      const activeNote = this.activeNotes.get(note);
      if (!activeNote) return;

      const { oscillator, gainNode } = activeNote;

      // Apply release
      const releaseTime = parseFloat(releaseSlider.value);
      const now = this.audioContext.currentTime;

      gainNode.gain.setValueAtTime(gainNode.gain.value, now);
      gainNode.gain.linearRampToValueAtTime(0, now + releaseTime);

      // Stop oscillator after release
      oscillator.stop(now + releaseTime);

      // Remove from active notes after release
      setTimeout(() => {
        this.activeNotes.delete(note);
      }, releaseTime * 1000);

      // Update UI
      const keyElement = document.querySelector(`.key[data-note="${note}"]`);
      if (keyElement) {
        keyElement.classList.remove("active");
      }
    }

    // Update filter settings for all active notes
    updateFilter(frequency, resonance) {
      this.activeNotes.forEach(note => {
        if (note.filter) {
          note.filter.frequency.value = frequency;
          note.filter.Q.value = resonance;
        }
      });
    }}


  // Create piano keyboard
  function createPiano() {
    // Clear the piano
    pianoElement.innerHTML = "";

    // Get piano dimensions
    const pianoWidth = pianoElement.clientWidth;
    const pianoHeight = pianoElement.clientHeight;

    // Create all keys
    keys.forEach(key => {
      const [note, type, label, position, width] = key;

      const keyElement = document.createElement("div");
      keyElement.className = `key ${type}-key`;
      keyElement.dataset.note = note;

      // Set key position and size based on relative percentages
      keyElement.style.left = `${position}%`;
      keyElement.style.width = `${width}%`;

      // Add note label
      const labelElement = document.createElement("div");
      labelElement.className = "note-label";
      labelElement.textContent = label;
      keyElement.appendChild(labelElement);

      // Add event listeners for mouse interaction
      keyElement.addEventListener("mousedown", () => {
        if (!audioContext) initAudio();
        synth.playNote(note);
        logMidiMessage("note-on", note, 127);
      });

      keyElement.addEventListener("mouseup", () => {
        if (!synth) return;
        synth.stopNote(note);
        logMidiMessage("note-off", note, 0);
      });

      keyElement.addEventListener("mouseleave", () => {
        if (!synth) return;
        if (synth.activeNotes.has(note)) {
          synth.stopNote(note);
        }
      });

      pianoElement.appendChild(keyElement);
    });
  }

  // Initialize audio context and synthesizer
  function initAudio() {
    if (audioContext) return;

    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    synth = new Synthesizer(audioContext);
  }

  // Log MIDI message to UI
  function logMidiMessage(type, data1, data2) {
    const entry = document.createElement("div");
    entry.classList.add("midi-message-entry", type);

    const timestamp = new Date().toISOString().substr(11, 12);

    let message = `[${timestamp}] `;

    switch (type) {
      case "note-on":
        message += `Note On: ${midiNoteToName(
        data1)
        } (${data1}) Velocity: ${data2}`;
        break;
      case "note-off":
        message += `Note Off: ${midiNoteToName(data1)} (${data1})`;
        break;
      case "cc":
        message += `Control Change: Controller ${data1}, Value: ${data2}`;
        break;
      default:
        message += `${type}: ${data1}, ${data2}`;}


    entry.textContent = message;
    midiMessagesElement.prepend(entry);

    // Limit number of messages
    while (midiMessagesElement.children.length > 50) {
      midiMessagesElement.removeChild(midiMessagesElement.lastChild);
    }
  }

  // Convert MIDI note number to note name
  function midiNoteToName(note) {
    const noteNames = [
    "C",
    "C#",
    "D",
    "D#",
    "E",
    "F",
    "F#",
    "G",
    "G#",
    "A",
    "A#",
    "B"];

    const octave = Math.floor(note / 12) - 1;
    const noteName = noteNames[note % 12];
    return `${noteName}${octave}`;
  }

  // Initialize MIDI
  async function initMIDI() {
    if (!navigator.requestMIDIAccess) {
      midiStatusElement.textContent = "Web MIDI API not supported in this browser";
      return false;
    }

    try {
      midiAccess = await navigator.requestMIDIAccess();

      // Update status
      midiStatusElement.textContent =
      "MIDI enabled. " + midiAccess.inputs.size + " input(s) detected.";

      // Show input selector if inputs exist
      if (midiAccess.inputs.size > 0) {
        midiInputSelect.style.display = "block";
        midiInputLabel.style.display = "block";

        // Clear existing options
        while (midiInputSelect.firstChild) {
          midiInputSelect.removeChild(midiInputSelect.firstChild);
        }

        // Add default option
const defaultOption = document.createElement("option");
        defaultOption.value = "";
        defaultOption.textContent = "-- Select MIDI Input --";
        midiInputSelect.appendChild(defaultOption);

        // Add input options
        midiAccess.inputs.forEach((input, id) => {
          const option = document.createElement("option");
          option.value = id;
          option.textContent = input.name || `Input ${id}`;
          midiInputSelect.appendChild(option);
        });
      }

      // Handle connection changes
      midiAccess.addEventListener("statechange", handleStateChange);

      return true;
    } catch (error) {
      console.error("MIDI access denied:", error);
      midiStatusElement.textContent =
      "MIDI access denied. Check browser permissions.";
      return false;
    }
  }

  // Handle MIDI state changes
  function handleStateChange(event) {
    const port = event.port;
    console.log(`MIDI port ${port.name} state changed to ${port.state}`);

    // Re-init MIDI
    initMIDI();

    // If the active input disconnected, clear it
    if (
    activeInput &&
    activeInput.id === port.id &&
    port.state === "disconnected")
    {
      setActiveInput(null);
      midiInputSelect.value = "";
    }
  }

  // Set active MIDI input
  function setActiveInput(inputId) {
    // Disconnect previous input
    if (activeInput) {
      activeInput.removeEventListener("midimessage", handleMIDIMessage);
    }

    // Clear active input
    activeInput = null;

    // If no input ID provided, return
    if (!inputId) {
      midiStatusElement.textContent = "No MIDI input selected.";
      return;
    }

    // Set new input
    const input = midiAccess.inputs.get(inputId);
    if (input) {
      activeInput = input;
      input.addEventListener("midimessage", handleMIDIMessage);
      midiStatusElement.textContent = `Active input: ${input.name || inputId}`;
    } else {
      midiStatusElement.textContent = "Invalid MIDI input selected.";
    }
  }

  // Handle MIDI messages
  function handleMIDIMessage(event) {
    const [status, data1, data2] = event.data;

    // Extract message type and channel
    const messageType = status >> 4;
    const channel = status & 0xf;

    // Initialize audio if not already done
    if (!audioContext) {
      initAudio();
    }

    // Handle different message types
    switch (messageType) {
      case 0x9: // Note On (0x90-0x9F)
        if (data2 > 0) {
          synth.playNote(data1, data2);
          logMidiMessage("note-on", data1, data2);
        } else {
          // Note On with velocity 0 is equivalent to Note Off
          synth.stopNote(data1);
          logMidiMessage("note-off", data1, 0);
        }
        break;

      case 0x8: // Note Off (0x80-0x8F)
        synth.stopNote(data1);
        logMidiMessage("note-off", data1, data2);
        break;

      case 0xb: // Control Change (0xB0-0xBF)
        // Handle common CC messages
        switch (data1) {
          case 1: // Modulation wheel
            logMidiMessage("cc", data1, data2);
            // Map mod wheel (0-127) to filter cutoff
            const normalizedValue = data2 / 127;
            const minLog = Math.log(60);
            const maxLog = Math.log(10000);
            const filterValue = Math.exp(
            minLog + normalizedValue * (maxLog - minLog));


            filterCutoffSlider.value = filterValue;
            filterCutoffValue.textContent = Math.round(filterValue);

            // Apply to all active notes
            if (synth) {
              synth.updateFilter(filterValue, parseFloat(filterResonanceSlider.value));
            }
            break;

          default:
            logMidiMessage("cc", data1, data2);}

        break;

      default:
        // Log other message types
        console.log("MIDI message:", event.data);}

  }

  // Event Listeners
  enableMidiButton.addEventListener("click", async function () {
    initAudio();
    const midiInitialized = await initMIDI();

    if (midiInitialized) {
      this.textContent = "MIDI Enabled";
      this.disabled = true;
    }
  });

  midiInputSelect.addEventListener("change", function () {
    setActiveInput(this.value);
  });

  waveformSelect.addEventListener("change", function () {
    // No need to update anything here - will apply to new notes
  });

  attackSlider.addEventListener("input", function () {
    attackValue.textContent = this.value;
  });

  releaseSlider.addEventListener("input", function () {
    releaseValue.textContent = this.value;
  });

  filterCutoffSlider.addEventListener("input", function () {
    filterCutoffValue.textContent = this.value;

    if (synth) {
      synth.updateFilter(
      parseFloat(this.value),
      parseFloat(filterResonanceSlider.value));

    }
  });

  filterResonanceSlider.addEventListener("input", function () {
    filterResonanceValue.textContent = this.value;

    if (synth) {
      synth.updateFilter(
      parseFloat(filterCutoffSlider.value),
      parseFloat(this.value));

    }
  });

  // Window resize handler
  window.addEventListener("resize", function () {
    // Recreate piano on window resize
    createPiano();
  });

  // Create piano on load
  createPiano();
});