Play Pause button on keyboard not interacting with amplitude buttons

Issue description

Pressing play / pause on the keyboard does not trigger the amplitude play pause html classes. The audio pauses but the button classes do not reflect the change.


  • Amplitude.js Version:

Steps to reproduce the issue

  1. Play audio
  2. Press play/pause button key
  3. Watch button html not change

What is expected?

Button classes should change with audio state changes

Link to where issue can be reproduced

I am not able to recreate in codepen as the play pause buttons do not change with the keyboard button. I didn’t add any extra JS to handle this. If we discuss further I can provide a test link in private.

Additional details / screenshots

I was able to solve this issue by adding the following callback:

            pause: function() {
                // this callback triggers on song end and song change

                //playpause is your main play button
                if($playpause.hasClass('amplitude-playing')) {

I also ran into a similar issue where setting a timestamp on load would autoplay but not update these buttons either. The following code caused the problem:

            initialized: function() {
                    Amplitude.skipTo(100, 2);

I fixed this with a similar fix as above, but I really am not a fan as it seems like unnecessary work on the callback.

            timeupdate: function() {
                if($playpause.hasClass('amplitude-paused')) {

Hi @jacobraccuia,

Thanks for posting your solution! This is definitely an AmplitudeJS Issue and needs to be added to the core. It’s been taking a long time to release an update because of a core issue with re-binding these events. I’d recommend your solution until Amplitude 5.3 is released where song changes and audio updates properly re-bind events.

If you are using smaller audio, you could try: The update that cleared un-used memory, broke 5.1 & 5.2. 5.3 will resolve all of these issues, but is taking much longer than anticipated.