Plugin:
Tutorial:
This tutorial will guide you on how to enable the space key to play or pause the WordPress audio player created with Wonder Audio Player. It will also provide the code to use the left arrow key for playing the previous track and the right arrow key for playing the next track.
To enable the space key to play or pause the WordPress audio player, edit your player in Wonder Audio Player. Navigate to the 'Options' tab, then to 'Advanced Options,' and add the following code to the 'Custom JavaScript' input box:
(function($){
$(document).ready(function() {
$(document).on("keydown", function(e){
if (e.keyCode == 32) {
var obj = $("#wonderpluginaudio-AUDIOPLAYERID").data("object");
if (obj) {
if (obj.audioPlayer.isPlaying) {
obj.pauseAudio();
} else {
obj.playAudio();
}
return false;
}
}
});
});
})(jQuery);
Please note that for the key to work, the web browser window must be in focus; otherwise, the computer won't pass the key event to the web browser.
If there are multiple tracks in the player and you want to support using the left arrow key for playing the previous track and the right arrow key for playing the next track, you can use the following code:
(function($){
$(document).ready(function() {
$(document).on("keydown", function(e){
if (e.keyCode == 32 || e.keyCode == 37 || e.keyCode == 39) {
var obj = $("#wonderpluginaudio-AUDIOPLAYERID").data("object");
if (obj) {
if (e.keyCode == 32) {
if (obj.audioPlayer.isPlaying) {
obj.pauseAudio();
} else {
obj.playAudio();
}
} else if (e.keyCode == 37) {
obj.audioRun(-2, true);
} else if (e.keyCode == 39) {
obj.audioRun(-1, true);
}
return false;
}
}
});
});
})(jQuery);
An online demo is as follows:
