CODEWITHSUNDEEP
javascriptjqueryhtmlaudioplayback
Mike
Mike

Reputation: 2391

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/

Upvotes: 0

Views: 729

Answers (1)

Nikola Zaykov
Nikola Zaykov

Reputation: 159

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.

Upvotes: 3

Related Questions