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.
Environment
Steps to reproduce the issue
- Play audio
- Press play/pause button key
- 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')) {
$playpause.removeClass('amplitude-playing').addClass('amplitude-paused');
}
},
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')) {
$playpause.addClass('amplitude-playing').removeClass('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: https://github.com/521dimensions/amplitudejs/releases/tag/v5.0.3. 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.