interaction between audio controls and keypresses

[craigsapp]

on https://performances.sapp.org, the audio playback can be started/stopped (paused) in three ways:

(1) Press the play/pause/stop buttons in the audio controls at the bottom of the page

(2) Press the space bar to start/stop (pause) the audio playback

and

(3) Click on a note to start the recording at a given note.

A problem occurs when changing between methods 1 and 2:

• When the audio play button is pressed at the bottom of the page, and then the space bar is pressed to stop the music, the music stops for an instant and then automatically restarts.

• Compare this to stopping the music with the stop or pause buttons in the audio controls, which works as expected. Also, using only the space bar to start/start the music works as expected. The problem only occurs when switching between the two methods.

• A related problem occurs when starting the audio with the space bar, then stopping the audio with audio controls. Then trying to start the audio with the space bar will cause the audio to play briefly and then stop.

---

The problem is most likely related to the musicbox.states.playing variable which is set to 1 when playing and 0 when not playing:

https://github.com/craigsapp/musicbox/blob/0766462f/src/scripts/musicbox.js#L31

And/or somehow the audio play/stop callbacks are not called in the same way between the keypress and audio controls interfaces:

https://github.com/craigsapp/musicbox/blob/0766462f/src/scripts/musicbox.js#L1032-L1073

Somehow this setInterval function in playMedia may be involved:

https://github.com/craigsapp/musicbox/blob/0766462f5/src/scripts/musicbox.js#L1042-L1060

[craigsapp]

The problem occurs in Chrome and Opera web browsers, but not in Safari or Firefox browsers. So perhaps it is a bug in the browser and/or the audio controls bypass the user-provided callbacks.

[PiotrSzy]

The problem occurs also in Firefox on Linux.

[PiotrSzy]

This is what is going on:

• musicbox.js listens for space key on root html element,
• the player control rendered by the browser handles space key as well (pause / play alternatively).

When the player is focused (i.e. because you clicked play button with a mouse) and space is pressed:

• the player control receives space key event,
• the event travels to root element, musicbox.js pauses playback (it takes a while),
• the control handles the key and playback is already paused by musicbox, so it starts playing again.

The bug does not occur then you move the focus away from the player before pressing space.

[PiotrSzy]

I am unable find any mean to prevent Firefox from processing space key when player is in focus. So I suggest not processing space in musicbox.js in this case by adding

//let the control handle space key if (document.activeElement === iface) break;

after this line https://github.com/craigsapp/musicbox/blob/0766462f525a0f998353e8fbe71d641842b4f7d8/src/scripts/musicbox.js#L883

However in this case space will not work when the browser doesn't handle it internally.