How to use the webmidi.addListener function in webmidi

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
      })

    }
  }

_bindInput(inputDevice){
		if (this._isEnabled){
			WebMidi.addListener('disconnected', (device) => {
				if (device.input){
					device.input.removeListener('noteOn')
					device.input.removeListener('noteOff')
				}
			})
			inputDevice.addListener('noteon', 'all', (event) => {
				try {
					this.emit('keyDown', event.note.number)
				} catch(e){
					console.warn(e)
				}
			})
			inputDevice.addListener('noteoff', 'all',  (event) => {
				try {
					this.emit('keyUp', event.note.number)
				} catch(e){

_bindInput(inputDevice){
		if (this._isEnabled){
			WebMidi.addListener('disconnected', (device) => {
				if (device.input){
					device.input.removeListener('noteOn')
					device.input.removeListener('noteOff')
				}
			})
			inputDevice.addListener('noteon', 'all', (event) => {
				try {
					this.emit('keyDown', event.note.number)
				} catch(e){
					console.warn(e)
				}
			})
			inputDevice.addListener('noteoff', 'all',  (event) => {
				try {
					this.emit('keyUp', event.note.number)
				} catch(e){

_bindInput(inputDevice){
		if (this._isEnabled){
			WebMidi.addListener('disconnected', (device) => {
				if (device.input){
					device.input.removeListener('noteOn')
					device.input.removeListener('noteOff')
				}
			})
			inputDevice.addListener('noteon', 'all', (event) => {
                this.emit('keyDown', event.note.number, event.velocity)
			})
			inputDevice.addListener('noteoff', 'all',  (event) => {
                this.emit('keyUp', event.note.number, event.velocity)
			})

			inputDevice.addListener('controlchange', "all", (event) => {
				if (event.controller.name === 'holdpedal'){
					this.emit(event.value ? 'pedalDown' : 'pedalUp')
				}

WebMidi.enable((err) => {
			if (!err){
				this._isEnabled = true
				if (WebMidi.inputs){
					WebMidi.inputs.forEach((input) => this._bindInput(input))
				}
				WebMidi.addListener('connected', (device) => {
					if (device.input){
						this._bindInput(device.input)
					}
				})
			}
		})
	}

WebMidi.enable((err) => {
			if (!err){
				this._isEnabled = true
				if (WebMidi.inputs){
					WebMidi.inputs.forEach((input) => this._bindInput(input))
				}
				WebMidi.addListener('connected', (device) => {
					if (device.input){
						this._bindInput(device.input)
					}
				})
			}
		})
	}

WebMidi.enable((e) => {
				if (e) {
					error(e)
				}
				WebMidi.addListener('connected', (event) => {
					if (event.port.type === 'input') {
						this._addListeners(event.port)
					}
				})
				WebMidi.addListener('disconnected', (event) => {
					this._removeListeners(event.port)
				})
				done()
			})
		})

webmidi.enable((e) => {
        if (e) return;
        $("#midi-ui-default").hide();
        $("#select-midi-input").prop("disabled", false);
        webmidi.addListener("connected", handleMIDIConnect);
        webmidi.addListener("disconnected", handleMIDIDisconnect);
    });
    /**

webmidi.enable((e) => {
        if (e) return;
        $("#midi-ui-default").hide();
        $("#select-midi-input").prop("disabled", false);
        webmidi.addListener("connected", handleMIDIConnect);
        webmidi.addListener("disconnected", handleMIDIDisconnect);
    });
    /**