热键播放/暂停HTML5音乐播放器
问题描述:
这是我用于HTML5音乐播放器的JavaScript代码的一小部分。我想知道你们是否可以帮助我建立一个热键来使用Space键切换播放/暂停按钮。有任何想法吗?热键播放/暂停HTML5音乐播放器
CODE:
$('.trackslist li').live('click', function(event) {
var $track = $(this),
$player = $track.closest('.player'),
trackId = $track.data('sc-track').id,
play = $player.is(':not(.playing)') || $track.is(':not(.active)');
if (play) { onPlay($player, trackId); }else{ onPause($player); }
$track.addClass('active').siblings('li').removeClass('active');
return false;
});
$('.next').live('click', function(event) {
$player = $(this).closest('.player');
onNext($player);
});
$('.prev').live('click', function(event) {
$player = $(this).closest('.player');
onPrev($player);
});
一个想法,我发现:
document.onkeydown = function(e){
var ev = isIE?event:e;
if(ev.charCode && ev.charCode == 32)
player.playPause();
else{
switch(ev.keyCode){
case 32:
player.playPause();
break;
case 39:
player.nextSong();
break;
case 37:
player.prevSong();
break;
case 38:
player.volumeInc();
break;
case 40:
player.volumeDec();
break;
}
}
}
答
在你的document
元素的事件代码,该player
变量没有设置任何东西。
而且jQuery的normilizes的e.keyCode
和e.charCode
性能与e.which
但如果你使用绑定到事件仅仅是jQuery的:
$(document).on('keydown', function (event) {
var key = event.which,//get charCode of event
player = $('audio');//get the player (I'm assuming it's an `audio` tag)
switch(ev.keyCode){
case 32:
player.playPause();
break;
case 39:
player.nextSong();
break;
case 37:
player.prevSong();
break;
case 38:
player.volumeInc();
break;
case 40:
player.volumeDec();
break;
}
});
我注意到,trackId = $track.data('sc-track').id
可能实际上没有得到$track
元素的ID ,请尝试以下之一:
trackId = $track.data('sc-track')//this will get the `data-sc-track` attribute for this element
OR
trackId = $track[0].id//this will get the ID of this element
最后一个注释.live()
自jQuery 1.7起折旧。如果您使用的是旧版本,则应该使用.delegate()
,如果您使用的是jQuery 1.7或更高版本,则应使用.on()
。
所以没有办法,我可以做到这一点? – 2011-12-20 20:08:47
@RickyCortes您需要检索'keydown'事件处理函数内的播放器的引用,以便您可以暂停或播放它。 – Jasper 2011-12-20 20:11:15
哦,好吧,底部的代码只是我发现的相关内容。它与*代码无关。 – 2011-12-20 20:11:27