Search code examples
javascriptjqueryhtmlaudioplayback

jQuery html5 audio move step back or jump forward shortcut


I am using the following code to play/pause html5 audio player using the button \:

$(document).keypress(function(e) {

                var video = document.getElementById("myAudio");
                // \
                if ((e.which == 92) || (e.keyCode==92)) {
                    if (video.paused)
                        video.play();
                    else
                        video.pause();
                }
            });

I want to add keyboard shortcuts to step back 5 seconds (using ctrl+left arrow) or jump forward 5 seconds (using ctrl+right arrow) from the current location.

I have a script, but I am not sure how to edit it to do that:

let toggleChecked, toggleEnabled, observer, dirVideo, settings = {
    skip:      5,
};

    skipLeft: function(v,key,ctrl){
            v.currentTime -= settings.skip;
    },

    skipRight: function(v,key,ctrl){
            v.currentTime += settings.skip;
    },

Here is a jsfiddle with the first script: https://jsfiddle.net/12jpk4L0/


Solution

  • Your js need to look like this

    var video = document.getElementById("myAudio");
    $(document).keypress(function(e) {
        // \
        if ((e.which == 92) || (e.keyCode==92)) {
            if (video.paused)
                video.play();
            else
                video.pause();
        }
    });
    
    $(document).keydown(function(e) {
        if ((e.which == 37) || (e.keyCode == 37)) {
            if (video.currentTime - 5 > 0) {
                video.currentTime -= 5;
            }
        }
    
        if ((e.which == 39) || (e.keyCode == 39)) {
            if (video.currentTime + 5 < video.duration) {
                video.currentTime += 5;
            }
        }
    });
    

    Arrow keys are triggered by keydown not keypress function.