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(); 
    } 
};