2

jPlayerを使用して問題が発生しました。いくつかの場所を検索した後、ここでは十分に一般的に使用され、誰かが同様の問題に遭遇したに違いないと思いました。

jPlayerを使用してオーディオファイルを再生していますが、ユーザーは特定のホットキーを使用して早送りと巻き戻しを行う機能を望んでいます。jPlayerは、この機能をそのままでは提供していないことに気付きました（現在、進行状況バーをクリックして早送りと巻き戻しのみを処理します） 。

理想的には、必要なのは、1回のキー押下で早送り（または巻き戻し）を切り替えることだけです。同じキーをもう一度押すと、現在の場所に基づいてオーディオファイルの再生が開始されます。

4

1 に答える 1

4

私はこれに対して独自のソリューションを実装することにしましたが、現在は問題なく機能しているようです。他の誰かがそのような問題に遭遇した場合に備えて、私はそれを共有したいと思いました。

大雑把な実装はご容赦ください。これは概念実証にすぎませんでした。

必要なJavascript：

//Handles the key down event (so the user can hold a key down to continue)
$(document).keydown(function (e) {
    //Rewind
    if (e.keyCode == 37 && (!rewinding)) {
        rewinding = true;
        //Pause the player
        $("#player").jPlayer("pause");
        RewindTrack();
        rwaction = window.setInterval(function () { RewindTrack() }, 500);
    }
    else if (e.keyCode == 39 && (!fastforward)) {
        fastforward = true;
        //Pause the player
        $("#player").jPlayer("pause");
        FastforwardTrack();
        ffaction = window.setInterval(function () { FastforwardTrack() }, 500);
    }
});
//Ends the action
$(document).keyup(function (e) {
    //Rewind
    if (e.keyCode == 37) {
        rewinding = false;
        window.clearInterval(rwaction);
        $("#player").jPlayer("pause");
    }
    else if (e.keyCode == 39) {
        fastforward = false;
        window.clearInterval(ffaction);
        $("#player").jPlayer("pause");
    }
});

//Related function
function GetPlayerProgress() {
    return ($('.jp-play-bar').width() / $('.jp-seek-bar').width() * 100);
}

//Handles rewinding
function RewindTrack() {
    //Get current progress and decrement
    var currentProgress = GetPlayerProgress();
    //Rewinds 10% of track length
    var futureProgress = currentProgress - 10;
    //If it goes past the starting point - stop rewinding and pause
    if (futureProgress <= 0) {
        rewinding = false;
        window.clearInterval(rwaction);
        $("#player").jPlayer("pause", 0);
    }
    //Continue rewinding
    else {
        $("#player").jPlayer("playHead", parseInt(futureProgress, 10));
    }
}

//Fast forwards the track
function FastforwardTrack() {
    //Get current progress and increment
    var currentProgress = GetPlayerProgress();
    //Fast forwards 10%
    var futureProgress = currentProgress + 10;
    //If the percentage exceeds the max - stop fast forwarding at the end.
    if (futureProgress >= 100) {
        fastforward = false;
        window.clearInterval(ffaction);
        $("#player").jPlayer("playHead", parseInt($('.jp-duration').text().replace(':', '')));
    }
    else {
        $("#player").jPlayer("playHead", parseInt(futureProgress, 10));
    }
}

作業デモ（巻き戻しには左矢印を使用し、早送りには右矢印を使用）

于 2012-08-09T14:21:53.163 に答える