Javascript Play/Pause 按钮键盘事件

Question

我仍在开发音乐播放器，已分配鼠标控件，但我在 PLAY/PAUSE 按钮上的键盘事件方面遇到了一些问题。

到目前为止，我让用户能够通过按空格键 "click" 播放按钮。发生的情况是 PLAY 按钮被隐藏并替换为 PAUSE 按钮。

我现在想要的是让用户能够再次按下空格键，因此它 "clicks" 暂停，因此再次显示播放。

这是我的资料：

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

第一个错误是你没有关闭所有括号，第二个错误是这部分代码：

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

有效。你在任何时候 space 时仔细检查 space keyCode，第一个条件每次都为真。

其次，您需要使用 $bla 而不是 $("#blablabla") 。它运行了将近 600 行代码来查找对象 select everytime.So 不要让重复的工作.

最后，$() 就像 $(doucument).ready()。渲染完成后就全部完成了，DOM 它是 OK.THAT IS！

**代码**

$(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 4

看来您缺少了更多关于 js 的知识，这些知识会随着时间的推移而来 :) 这是我如何完成此操作的代码笔。

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

Javascript Play/Pause 按钮键盘事件

Javascript Play/Pause button Keyboard event

javascript

keyboard

jquery

keyboard-events