jPlayer - 通過Javascript實現倒帶功能

Question

我遇到了一個問題，使用jPlayer我想在搜索了幾個地方之後，它會在這裏被普遍使用，而且有人肯定會碰到類似的問題。

我使用jPlayer播放音頻文件，我的用戶希望通過特定的熱鍵快速前進和後退功能。我注意到，jPlayer不開箱提供此功能（它只能處理快進，並通過點擊進度條上目前倒帶）

理想 - 所有這將是必要的將是一個按鍵切換快進（或倒帶）。當再次按下相同的鍵時，音頻文件將根據當前位置開始播放。

Answer 1

我決定實現我自己的解決方案，目前似乎工作得很好。我想我會分享它，以防其他人遇到這樣的問題。

請原諒實施。這只是一個概念證明：

必要的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)); 
    } 
} 

Working Demo