🎹 Synth Selector

A reusable, DRY instrument selector component for MIDI applications

📖 Overview

This is a reusable component that provides a dropdown selector for General MIDI instruments.

Features:

  • All 128 General MIDI instruments organized by category
  • Automatic program change messages to MIDI ports
  • Event listeners for instrument changes
  • Programmatic control via API
  • Customizable styling and labels

🎼 Live Demo - Interactive Piano

Select an instrument and click the piano keys to play!

C
D
E
F
G
A
B
C
C#
D#
F#
G#
A#

Current Status

Instrument: Not initialized

Program Number: -

Synth Status: Not initialized

🎼 All 128 General MIDI Instruments

Complete General MIDI instrument list organized by family. Click any instrument to hear it!

Program Instrument Name

💻 Usage Examples

Basic Usage:

// Create selector in a container
const selector = new JZZSynthSelector('#myContainer', {
  label: 'Select Instrument',
  defaultProgram: 0,  // Acoustic Grand Piano
  showGroups: true,   // Organize by instrument families
  onChange: (program) => {
    console.log('Selected program:', program);
  }
});

// Listen to changes
selector.on('change', (program) => {
  console.log('Instrument changed to:', selector.getProgramName());
});

// Connect to JZZ MIDI port
JZZ().openMidiOut().then(port => {
  selector.setPort(port);
});

// Programmatically change instrument
selector.setProgram(24); // Acoustic Guitar (nylon)

Integration with Keyboard/Guitar Demos:

// In keyboard-demo.html or guitar-demo.html:
const selector = new JZZSynthSelector('#instrumentSelector', {
  port: synthPort,      // Your JZZ MIDI port
  channel: 0,           // MIDI channel
  defaultProgram: 0
});

selector.on('change', (program) => {
  log(`Switched to: ${selector.getProgramName()}`);
});

📜 Activity Log