How to use webmidi - 10 common examples

constructor() {
    super()

    // Web MIDI is disabled
    store.dispatch(enableMidi(false))

    // Enable Web MIDI
    WebMidi.enable(err => {

      if (err) {
        console.error('Web MIDI API could not be enabled:', err)
      } else {
        // MIDI input / output ports (from a single device) are connected to the computer
        WebMidi.addListener('connected', e => {
          const { manufacturer, name, id, type } = e.port
          console.log('MIDIController added:', 'Manufacturer:', manufacturer, '| Name:', name, '| ID:', id, '| Type:', type)
        })

        WebMidi.addListener('disconnected', e => {
          const { manufacturer, name, type, id } = e.port
          console.log('MIDIController removed:', 'Manufacturer:', manufacturer, '| Name:', name, '| ID:', id, '| Type:', type)
        })

        // Web MIDI is enabled

constructor (opts = {}) {
    super();

    const options = Object.assign(opts, {logging: true});
    log.enabled = options.logging;
    this.activePads = [];
    this.batchCommands = []; // batch commands in case something is called before web midi is enabled
    this.midiEnabled = false;
    this.pushConnected = false;

    WebMidi.enable((err) => {
      if (err) {
        log('WebMidi could not be enabled.');
        return;
      }

      this.midiEnabled = true;
      log('WebMidi enabled!');

      WebMidi.addListener('connected', (...args) => {
        if (this.pushConnected) {
          return;
        }
        this.pushConnected = true;
        this.setupPush();
        log('CONNECTED', args);
        this.emit('push:connected');

setupPush () {
    const push = this;
    push.output = WebMidi.getOutputByName('Ableton Push 2 User Port');
    push.input = WebMidi.getInputByName('Ableton Push 2 User Port');
    if (!push.input || !push.output) {
      log('push not connected');
      push.emit('push:failed');
      return;
    }

    push.input.addListener('sysex', 'all', (e) => {
      log('sysex', e);
    });

    // Listen to control change message on all channels
    push.input.addListener('controlchange', 'all', (e) => {
      log('Received \'controlchange\' message.', e);
      if (e.controller) {
        const name = e.controller.name;

setupPush () {
    const push = this;
    push.output = WebMidi.getOutputByName('Ableton Push 2 User Port');
    push.input = WebMidi.getInputByName('Ableton Push 2 User Port');
    if (!push.input || !push.output) {
      log('push not connected');
      push.emit('push:failed');
      return;
    }

    push.input.addListener('sysex', 'all', (e) => {
      log('sysex', e);
    });

    // Listen to control change message on all channels
    push.input.addListener('controlchange', 'all', (e) => {
      log('Received \'controlchange\' message.', e);
      if (e.controller) {
        const name = e.controller.name;
        const number = e.controller.number;

midiEnabledChanged() {
    if (this.midiEnabled) {
      // MIDI input / output ports (from a single device) are connected to the computer
      WebMidi.addListener('connected', e => {

        const { port } = e
        const { name, type } = port

        // The connected event is triggered twice for input, that's why we need to check
        // if this.input is already defined or not, @see https://github.com/NERDDISCO/luminave/issues/14
        if (name === this.inputname && type === 'input' && this.input === null) {
          this.input = port

          // Listen to "noteon" events
          this.input.addListener('noteon', 'all', this.noteon.bind(this))

          // Listen to "controlchange" events
          this.input.addListener('controlchange', 'all', this.controlchange.bind(this))

          // Controller is connected

// Listen to "noteon" events
          this.input.addListener('noteon', 'all', this.noteon.bind(this))

          // Listen to "controlchange" events
          this.input.addListener('controlchange', 'all', this.controlchange.bind(this))

          // Controller is connected
          this.connected = true

        } else if (name === this.outputname && type === 'output') {
          this.output = port
        }
      })

      // MIDI input / output ports (from a single device) are disconnected to the computer
      WebMidi.addListener('disconnected', e => {
        const { name, type } = e.port

        if (name === this.inputname && type === 'input') {
          // Remove all listener
          this.input.removeListener()

          this.input = null
        } else if (name === this.outputname && type === 'output') {
          this.output = null
        }

        this.connected = false
      })

    }
  }

initialize(attributes: any, options: any) {
    super.initialize(attributes, options);
    if (!midi.enabled) {
      throw new Error('WebMidi library not enabled');
    }

    const input = midi.inputs.findIndex(x => x.manufacturer === "Behringer" && x.name.startsWith("X-TOUCH MINI"));
    if (input === -1) {
      throw new Error("Could not find Behringer X-TOUCH MINI input");
    }

    const output = midi.outputs.findIndex(x => x.manufacturer === "Behringer" && x.name.startsWith("X-TOUCH MINI"));
    if (output === -1) {
      throw new Error("Could not find Behringer X-TOUCH MINI output");
    }

    this.set('_controller_input', input);
    this.set('_controller_output', output);


    // Make sure we are in MCU protocol mode
    midi.outputs[output].sendChannelMode(
      127,

requestMidiAccess = () => {
    webmidi.enable(err => {
      if (err) {
        this.canAccessMidi = false;
        alert("No midi support in your browser."); // eslint-disable-line
      } else {
        this.canAccessMidi = true;
        this.initializeMidi();
      }
    });
  }

const input = midi.inputs.findIndex(x => x.manufacturer === "Behringer" && x.name.startsWith("X-TOUCH MINI"));
    if (input === -1) {
      throw new Error("Could not find Behringer X-TOUCH MINI input");
    }

    const output = midi.outputs.findIndex(x => x.manufacturer === "Behringer" && x.name.startsWith("X-TOUCH MINI"));
    if (output === -1) {
      throw new Error("Could not find Behringer X-TOUCH MINI output");
    }

    this.set('_controller_input', input);
    this.set('_controller_output', output);


    // Make sure we are in MCU protocol mode
    midi.outputs[output].sendChannelMode(
      127,
      1 /* MCU mode */,
      1 /* global channel */
    );
    this.setup().then((controls: any) => {
      this.set(controls);
      this.save_changes();
    });
  }

export default async function enableMIDI() {
  if (midi.enabled) {
    return;
  }

  const midiEnabled = new PromiseDelegate();
  midi.enable(function(err) {
    if (err) {
      midiEnabled.reject(err);
    } else {
      midiEnabled.resolve(undefined);
    }
  });  
  await midiEnabled.promise;
  // if (!(midi.inputs[1] && midi.outputs[1])) {
  //   throw new Error("Could not find MIDI device");
  // }
}