Извлечь MIDIInput из обработчика onstatechange? - PullRequest
Новая
       29

Извлечь MIDIInput из обработчика onstatechange?

0 голосов
/ 31 мая 2019

Когда приложение открывается в браузере, отображаются уже подключенные устройства и обрабатываются их сообщения, а входящие заметки воспроизводятся очень хорошо.

Теперь я хотел бы обновить этот список устройств, когдаЯ подключаю горячее устройство к одному устройству, это после запуска приложения в браузере.

Я могу записать сообщение, когда устройство подключено горячим или горячим способом: 

public logDeviceHotPlug() {
  return from(navigator.requestMIDIAccess())
    .subscribe((midiAccess: WebMidi.MIDIAccess) => {
      midiAccess.onstatechange = e => {
        console.log('Port name: ' + e.port.name
          + ' Type: ' + e.port.type
          + ' Manufacturer: ' + e.port.manufacturer
          + ' State: ' + e.port.state);
      };
    });
}

Этот метод вышесидит в классе обслуживания и вызывается из класса компонента: 

export class DeviceComponent implements OnInit {

  devices$: Observable<Array<Device>>;

  constructor(
    public storeService: StoreService,
    private midiService: MidiService
  ) { }

  ngOnInit() {
    this.devices$ = this.storeService.getDevices();
    this.getConnectedDevices();
    this.midiService.logDeviceHotPlug();
  }

  private getConnectedDevices() {
    this.midiService.getInputDevices().subscribe((inputDevice: WebMidi.MIDIInput) => {
      this.addDevice(inputDevice);
    });
  }

}

Итак, я создал метод: 

private handleDeviceHotPlug() {
  this.midiService.getMidiAccess()
    .subscribe((midiAccess: WebMidi.MIDIAccess) => {
      midiAccess.onstatechange = (event: WebMidi.MIDIConnectionEvent) => {
        console.log(event);
        if (event.port.state === 'connected') {
          console.log('Connected the device: ' + event.port.name);
          this.devices$ =  this.midiService.addMidiDevice(event.port);
        } else if (event.port.state === 'disconnected') {
          console.log('Disconnected the device: ' + event.port.name);
          this.devices$ =  this.storeService.removeDevice(event.port.name);
        } else {
          this.devices$ =  this.storeService.getDevices();
        }
      };
    });
}

, который использует метод обслуживания: 

public addMidiDevice(inputDevice: WebMidi.MIDIInput): Observable<Array<Device>> {
  const device: Device = new Device(inputDevice.name, inputDevice);
  this.handleMessagesFromInputDevice(inputDevice.name);
  return this.storeService.addDevice(device);
}

но это дает мне ошибку времени компиляции в строке исходного кода: this.midiService.addMidiDevice(event.port);
с сообщением об ошибке:
Argument of type 'MIDIPort' is not assignable to parameter of type 'MIDIInput'. Property 'onmidimessage' is missing in type 'MIDIPort' but required in type 'MIDIInput'.

Есть ли способ получить MIDIInputобъект вместо MIDIPort объекта из этого обработчика onstatechange?

...