Javascript播放/暫停按鈕鍵盤事件

Question

我仍在使用音樂播放器，鼠標控件已分配，但我在播放/暫停按鈕上的鍵盤事件中遇到了一些麻煩。

到目前爲止，我讓用戶能夠通過按下空格鍵來「點擊」播放按鈕。會發生什麼情況是PLAY按鈕被隱藏並被PAUSE按鈕取代。

我現在想要的是讓用戶能夠再次按空格鍵，以便「點擊」暫停，因此再次顯示播放。

以下是我有：

HTML

<div> 

      <a href="#" id="play"> </a> 

      <a href="#" id="pause" style="display: none;"></a> 

</div> 

腳本

<script> 

/* mouse */ 

    $('#play').on('click', function(event) { 
     console.log('play click clicked'); 
    //currentPlayingTrack.play(); 

    $('#pause').show(); 
    $('#play').hide(); 

    $('#pause').on('click', function(event) { 
    //currentPlayingTrack.pause(); 

    $('#pause').hide(); 
    $('#play').show(); 
    }); 

/* keyboard */ 

var play = document.getElementById("play"); 
var pause = document.getElementById("pause"); 


document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
     play.click(); 
    } 
    else if(e.keyCode == 32) { 
     pause.click(); 
    } 
}; 


    </script> 

我缺少什麼？

Answer 1

第一個錯誤是，你的arent關閉所有括號，二是這部分代碼：

if (e.keyCode == 32) { 
    play.click(); 
} 
else if(e.keyCode == 32) { 
    pause.click(); 
} 

我建議如果被按下或沒有按鍵播放是使用一個變量檢查​​：

var ispaused = true; 
var play = document.getElementById("play"); 
var pause = document.getElementById("pause"); 
$('#play').on('click', function(event) { 
ispaused = false; 
     console.log('play click clicked'); 
    //currentPlayingTrack.play(); 

    $('#pause').show(); 
    $('#play').hide(); 

/* keyboard */ 




}); 
    $('#pause').on('click', function(event) { 
    ispaused = true; 
    //currentPlayingTrack.pause(); 

    $('#pause').hide(); 
    $('#play').show(); 
    }); 

    document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
    if(ispaused == true){ 
     play.click(); 
     }else{ 
     pause.click(); 
     } 
    } 

}; 

fiddle

Answer 2

的錯誤是在這裏：

document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
    play.click(); 
    } else if(e.keyCode == 32) { 
    pause.click(); 
    } 
}; 

第二個條件無法執行，因爲每次keyCode是32時，它只會在第一個條件中執行。 你可以聲明一個變量「isPlaying」來表明你是否正在玩遊戲。

var isPlaying = false; 
document.onkeydown = function (e) { 
if (e.keyCode == 32) { 
    if (isPlaying) { 
    pause.click(); 
    } else { 
    play.click(); 
    } 
    isPlaying = !isPlaying; // if true equal false, if false equal true 
} 
}; 

Answer 3

你沒有先關閉功能，你應該糾正你這樣的代碼：

$('#play').on('click', function(event) { 
    console.log('play click clicked'); 
    //currentPlayingTrack.play(); 

    $('#pause').show(); 
    $('#play').hide(); 
}); // =========== added this line 

$('#pause').on('click', function(event) { 
    //currentPlayingTrack.pause(); 

    $('#pause').hide(); 
    $('#play').show(); 
}); 

Answer 4

它的工作原理。當你隨時隨地進行空間檢查時，你會檢查空間keyCode，並且第一個條件每次都是真實的。第二，你需要使用$ bla代替$（「＃blablabla」）。它每次運行近600行代碼，並且每次都選擇查找對象。所以不要讓重複的工作。

最後，$（）是lik $（doucument）.ready（）。它在渲染完成時完成，DOM完好無損。

** **代碼

$(function() { 
    let $play = $("#play"); 
    let $pause = $("#pause"); 
    $play.on('click', function (event) { 
    console.log('play click clicked'); 
    //currentPlayingTrack.play(); 
    $pause.show(); 
    $play.hide(); 
    }); 
    $pause.on('click', function (event) { 
    //currentPlayingTrack.pause(); 
    $pause.hide(); 
    $play.show(); 
    }); 

    /* keyboard */ 

    document.onkeydown = function (e) { 
    if (e.keyCode == 32) { 
     toggle = !toggle; 
     $play.trigger("click"); 
    } 
    else if (e.keyCode == 32) { 
     toggle = !toggle; 
     $pause.trigger("click"); 
    } 
    }; 
}); 

Answer 5

好像你錯過了JS這將拿出時間更多的知識:)這裏有一個codepen如何我會做到這一點。

http://codepen.io/smplejohn/pen/zNVbRb

<a href="#" class="playpause">Play</a> 
<a href="#" class="playpause" style="display:none">Pause</a> 

$('.playpause').click(function(){ 
    $('.playpause').toggle(); 
    return false; 
}); 

document.onkeydown = function (e) { 
    if (e.keyCode == 32){  
    $('.playpause').toggle(); 
    } 
};