Javascript播放/暂停按钮键盘事件

时间:2017-02-20 16:38:54

标签: javascript jquery keyboard keyboard-events

我还在制作一个音乐播放器,已经分配了鼠标控件,但是我在PLAY / PAUSE按钮上的键盘事件遇到了一些麻烦。

到目前为止,我让用户能够通过按空格键“点击”PLAY按钮。发生的事情是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>

我错过了什么?

4 个答案:

答案 0 :(得分:1)

错误就在这里:

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

第二个条件无法执行,因为每当keyCode为32时,它只在第一个条件下运行。 你可以声明一个变量&#34; isPlaying&#34;这表明玩家是否在玩游戏。

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

有效。你在任何时候进行空格时都会仔细检查空格键码,每次第一个条件都是真的。

其次,您需要使用$ bla代替$(&#34; #blablabla&#34;)。它运行近600行代码,每次都选择查找对象。所以不要让重复工作。

最后,$()是喜欢$(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");
    }
  };
});

答案 3 :(得分:0)

好像你已经错过了一些随时间推移的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();
  }
};