Howler.js: Keyboard controls (play/pause) working on howl object but not triggering onpause/onplay callbacks

[bar2]

Env:
OS: Mac OS X Mojave - 10.14.4 (18E226)
Browser: Google Chrome 74.0.3729.108 (Official Build) (64-bit)

Background:
1- Initiate a howl object with onplay, onpause callbacks,
2- Via interface: howl objects play/pause correctly, callbacks being called,
3- Via keyboard controls (media controls for play/pause): howl objects play/pause correctly, callbacks are not being called.

I can provide code or live example to this.

[goldfire]

I'm not sure I follow what the issue you are describing is. Code example would be helpful, thanks.

[gugiserman]

+1

Play/Pause from my keyboard is actually playing or pausing playback but onplay/onpause callbacks are not fired, so my UI doesn't reflect the state change.

I couldn't find any documentation on how to detect keydown events from those media keys on macOS as well.

[blakyris]

Same for me I want to dispatch redux actions when i play or pause but pressing play pause on keyboard is not triggering callbacks. It breaks my whole app

[damirkotoric]

+1 for this. My UI looks buggy without those callbacks firing when the keyboard media keys are used.

[Almo7aya]

+1
This is also happening when toggling the playstate from the windows 10 panel

[ChanMenglin]

+1
I encountered the same problem, and I hope that I can have corresponding events and callbacks when using the media key

[Pabloitto]

Any workaround for this ?

[Kevin-K]

Workaround:
Was able to tap into the navigator's mediaSession using Chrome 83 and bind the events to the play/pause functionality. Tested additionally on Safari 13.1.1, but Media Session API support doesn't seem to exist.

const howl = new Howl({/* initializers */});
if (navigator && navigator.mediaSession) {
      navigator.mediaSession.setActionHandler('play', () => howl.play());
      navigator.mediaSession.setActionHandler('pause', () => howl.pause());
}

[petrnagy]

Workaround:
Was able to tap into the navigator's mediaSession using Chrome 83 and bind the events to the play/pause functionality. Tested additionally on Safari 13.1.1, but Media Session API support doesn't seem to exist.

const howl = new Howl({/* initializers */});
if (navigator && navigator.mediaSession) {
      navigator.mediaSession.setActionHandler('play', () => howl.play());
      navigator.mediaSession.setActionHandler('pause', () => howl.pause());
}

This workaround does not seem to work when using html5: true.