jquery 在键盘键上切换音频播放

qvsjd97n  于 2023-06-22  发布在  jQuery
关注(0)|答案(1)|浏览(113)

这是我的代码'点击'-这工作得很好

masterPlay.addEventListener('click',() =>{
    if (audioElement.paused  || audioElement.currentTime<=0)
    {
        audioElement.play();
        masterPlay.classList.remove('fa-circle-play')
        masterPlay.classList.add('fa-circle-pause')
        gif.style.opacity = 1;
 
    }
    else 
    {
        audioElement.pause();
        masterPlay.classList.add('fa-circle-play')
        masterPlay.classList.remove('fa-circle-pause')
        gif.style.opacity = 0;

    }
})

这是我的代码按键不做任何事情。

document.getElementById("masterPlay").addEventListener('keypress',() =>{
    if (audioElement.paused  || audioElement.currentTime<=0)
    {
        audioElement.play();
        masterPlay.classList.remove('fa-circle-play')
        masterPlay.classList.add('fa-circle-pause')
        gif.style.opacity = 1;
 
    }
    else 
    {
        audioElement.pause();
        masterPlay.classList.add('fa-circle-play')
        masterPlay.classList.remove('fa-circle-pause')
        gif.style.opacity = 0;

    }
})

请告诉我正确的逻辑为'按键'工作

icomxhvb

icomxhvb1#

您正在为一个特定的元素分配一个键侦听器--这意味着它必须被聚焦才能工作。最好是使用<button>元素,并且需要使用.focus()将其聚焦到DOM就绪:

const elPlay = document.querySelector("#play");
const elAudio = document.createElement("audio");
elAudio.src = "//upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg";

const masterToggle = () => {
  elAudio[elAudio.paused ? "play" : "pause"]();
  elPlay.classList.toggle("fa-circle-play",  elAudio.paused);
  elPlay.classList.toggle("fa-circle-pause", !elAudio.paused);
};

// Do on button click or on "Space" key (if button is focused):
elPlay.focus();
elPlay.addEventListener("click", masterToggle);
#play.fa-circle-play::after{ content: "Play"; }
#play.fa-circle-pause::after{ content: "Pause"; }
Click or press Space to toggle play:<br>
<button id="play" class="fa-circle-play" aria-label="Toggle audio play" type="button"></button>

如果出于某种原因需要分配特定的键,可以使用"keydown"事件在window级别上执行。在这种情况下,还要确保用户没有在输入、文本区域等中键入:

const elPlay = document.querySelector("#play");
const elAudio = document.createElement("audio");
elAudio.src = "//upload.wikimedia.org/wikipedia/en/3/39/Metallica_-_Enter_Sandman.ogg";

const masterToggle = () => {
  elAudio[elAudio.paused ? "play" : "pause"]();
  elPlay.classList.toggle("fa-circle-play",  elAudio.paused);
  elPlay.classList.toggle("fa-circle-pause", !elAudio.paused);
};

// Do on button click or on "Space" key (if button is focused):
elPlay.focus();
elPlay.addEventListener("click", masterToggle);

// Do on specific keyboard key ["P"]
addEventListener("keydown", (evt) => {
  // console.log(evt.code)
  if (
    evt.code === "KeyP" &&
    !evt.target.closest("input, textarea, [contenteditable]")
  ) {
    masterToggle();
  }
});
#play.fa-circle-play::after{ content: "Play"; }
#play.fa-circle-pause::after{ content: "Pause"; }
Click or press Space to toggle play:<br>
<button id="play" class="fa-circle-play" aria-label="Toggle audio play" type="button"></button>

相关问题