Javascript Play/Pause кнопка Клавиатура событие

Question

Я все еще работаю над музыкальным проигрывателем, назначены элементы управления мышью, но у меня небольшие проблемы с событиями клавиатуры на кнопке 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>

Что мне не хватает?

Answer 1

Первая ошибка в том, что вы не закрываете все скобки, вторая - это часть кода:

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

Я предлагаю использовать переменную для проверки нажатия кнопки play или нет:

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

}; 

играть на скрипке

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

Похоже, вы упускаете немного больше знаний о 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();
  }
};

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

Вы не закрыли первую функцию, вы должны исправить свой код следующим образом:

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