Class: DataAttributeBinder

DataAttributeBinder(controller, selectoropt)

Declarative MIDI binding system using HTML data attributes. Enables zero-JavaScript MIDI controller creation by scanning the DOM for data-midi-* attributes and automatically binding elements to MIDIController. Features: - **Auto-discovery**: Scans DOM for data-midi-* attributes - **7-bit CC**: Bind with `data-midi-cc="74"` (e.g., Filter Cutoff) - **14-bit CC**: Bind with `data-midi-msb="74" data-midi-lsb="75"` for high resolution - **Custom ranges**: Use HTML min/max attributes or `data-midi-min`/`data-midi-max` - **Channel override**: `data-midi-channel="2"` to use channel 2 instead of default - **Value inversion**: `data-midi-invert="true"` to invert the value mapping - **De bouncing**: `data-midi-debounce="100"` for high-frequency updates (ms) - **Auto-binding**: Watch DOM for dynamically added/removed elements with MutationObserver - **Labeling**: `data-midi-label="Filter Cutoff"` for patch saving

Constructor

new DataAttributeBinder(controller, selectoropt)

Create a new DataAttributeBinder instance for declarative MIDI binding
Parameters:
Name Type Attributes Default Description
controller MIDIController MIDIController instance to bind elements to
selector string <optional>
 "[data-midi-cc]" CSS selector for elements to bind. Defaults to looking for data-midi-cc or data-midi-msb/lmb attributes
Source:
Examples
// 7-bit CC binding
<input type="range" min="0" max="127" data-midi-cc="74" data-midi-label="Filter Cutoff">
// 14-bit high-resolution binding
<input type="range" min="0" max="16383" data-midi-msb="74" data-midi-lsb="75" data-midi-label="Pitch Bend">
// With channel override and inversion
<input type="range" min="0" max="127" data-midi-cc="7" data-midi-channel="2" data-midi-invert="true" data-midi-label="Volume">
// With custom range
<input type="range" min="-100" max="100" data-midi-cc="10" data-midi-label="Pan">
// Complete setup with auto-binding
const midi = new MIDIController();
const binder = new DataAttributeBinder(midi);

// Bind existing elements
binder.bindAll();

// Enable auto-binding for dynamically added elements
binder.enableAutoBinding();
// Manual binding with custom selector
const binder = new DataAttributeBinder(midi, "[data-midi-cc]");
binder.bindAll();

Classes

DataAttributeBinder

Methods

bindAll() → {void}

Bind all matching elements in the document to MIDI Controller. Searches the DOM for elements that match the selector and have data-midi-* attributes. Skips already bound elements (marked with data-midi-bound attribute). Automatically handles both 7-bit CC and 14-bit CC configurations.
Source:
Returns:
Type
void
Examples
// Bind all elements with data-midi-cc or data-midi-msb/lmb attributes
binder.bindAll();
// Bind after DOM is loaded
document.addEventListener("DOMContentLoaded", () => {
  binder.bindAll();
});
// Bind after MIDI is ready
midi.on(midi.READY, () => {
  binder.bindAll();
});

destroy() → {void}

Clean up resources and disconnect any active observers. Disables auto-binding if active and disconnects the MutationObserver to prevent memory leaks. Call this when done with the binder instance.
Source:
Returns:
Type
void
Examples
// Clean up when done
const binder = new DataAttributeBinder(midi);
binder.bindAll();
binder.enableAutoBinding();

// Later, when cleaning up
binder.destroy();
// Clean up in response to user action
document.getElementById("cleanup-btn").addEventListener("click", () => {
  binder.destroy();
});

disableAutoBinding() → {void}

Disable automatic binding and clean up the MutationObserver. Stops watching for dynamically added/removed elements and disconnects the observer to prevent memory leaks.
Source:
Returns:
Type
void
Examples
// Temporarily disable auto-binding
binder.disableAutoBinding();
// Make bulk DOM changes
updateAllControls();
// Re-enable when done
binder.enableAutoBinding();
// Clean up when done with the binder
binder.disableAutoBinding();
binder.destroy();

enableAutoBinding() → {void}

Enable automatic binding of dynamically added elements using MutationObserver. Watches the DOM for new elements that match the selector and have data-midi-* attributes, automatically binding them when they're added. Also handles cleanup of removed elements.
Source:
Returns:
Type
void
Examples
// Enable and forget - perfect for single page apps
binder.enableAutoBinding();
// Add controls dynamically
binder.enableAutoBinding();
// Later, when you add new UI controls:
const newSlider = document.createElement("input");
newSlider.type = "range";
newSlider.setAttribute("data-midi-cc", "71");
document.getElementById("controls").appendChild(newSlider);
// Automatically bound!