无法让 audio.play() 和 audio.pause() 工作

Question

我正在尝试让我的音频播放和暂停。我可以让它播放，但无法让它暂停。我正在使用键 1、2、3 和 4 播放不同的音频。本质上，如果我按下 1，它应该播放，然后如果我再次按下 1，它应该暂停。如果我已经在播放键 1 的音频并按下键 2，它应该暂停键 1 的音频并播放键 2 的音频。我对这一切都很陌生，谢谢 :)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Study Vibes</title>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>


  <div class="keys">
    <div data-key="49" class="key 1">
      <kbd>Vol 1</kbd>
      <span class="sound">Press 1</span>
    </div>
    <div data-key="50" class="key 2">
      <kbd>Vol 2</kbd>
      <span class="sound">Press 2</span>
    </div>
    <div data-key="51" class="key 3">
      <kbd>Vol 3</kbd>
      <span class="sound">Press 3</span>
    </div>
    <div data-key="52" class="key 4">
      <kbd>Vol 4</kbd>
      <span class="sound">Press 4</span>
    </div>
  </div>

  <audio data-key="49" class="49" src="sounds/classic_lounge.m4a"></audio>
  <audio data-key="50" class="50" src="sounds/swing_beats.m4a"></audio>
  <audio data-key="51" class="51" src="sounds/rainy_days.m4a"></audio>
  <audio data-key="52" class="52" src="sounds/summer_vibes.m4a"></audio>

<script>



function playSound(e) {  
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if(audio.play !== true){
audio.play();
} else if (audio.play === true){
  audio.pause();
}
}

window.addEventListener('keydown', playSound);


</script>


</body>
</html>

Answer 1

Fiddler 示例（我只包含一个音频使用编号 1 仅用于测试）

http://jsfiddle.net/wupcdv8f/3/

使用属性 audio.paused 检查音频状态（playing/not 正在播放）。

这是我所做的更改

  if (audio.paused === true) {
    // not playing
    audio.play();
  } else if (audio.paused !== true) {
    // playing 
    audio.pause();
  }

我想问题是 .play 属性不存在但是有一个事件 play。使用这个事件你也可以切换音频状态。

无法让 audio.play() 和 audio.pause() 工作

Can't get audio.play() and audio.pause() to work

javascript

keydown

pause