JavaScript：如何在播放另一个音频样本时停止和重新启动音频？答案

【问题标题】：JavaScript: How to stop and restart audio when another audio sample is playing?JavaScript：如何在播放另一个音频样本时停止和重新启动音频？
【发布时间】：2020-10-06 15:13:46
【问题描述】：

我正在创建一个吉他应用程序，当您按下某些键时会播放和弦。我有根据您按下的键播放音频的代码。现在只有 A 和 G 和弦在起作用。但是，如果您再次按下相同的键或按下另一个键，音频仍将与新音频一起继续播放。我希望在您抬起所按住的键（keyup）后停止当前的声音。我正在阅读有关 Audio.pause() 和 currentTime = 0 的信息，但我不知道如何让它们工作。

document.addEventListener('keydown', function(event) {

  makeSound(event.key);

});

function makeSound(key) {

  switch(key) {
    case "a":
      var a2 = new Audio('sounds/a2.wav');
      a2.play();
      break;
    
    case "g":
      var g2 = new Audio('sounds/g2.wav');
      g2.play();
      break;
  
  }
};

body {
  background: black;
  font-family: sans-serif;
}

button {
  font-size: 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Guitar</title>
</head>
<body>
  <button class="chord a2">A2</button>
  <button class="chord g2">G2</button>

  <script src="main.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript audio

【解决方案1】：

要暂停和重置音频，您需要参考当前播放的音频。目前，您每次按下某个键时都会创建新的音频播放器，因此对音频的引用会丢失。

将您的音频和弦放在文件的顶部。我们将为每个 keydown 事件使用相同的音频播放器。创建一个变量，该变量将保存对当前正在播放的音频的引用。

每当您松开按键时，您都应该检查参考是否指向和弦音频播放器。如果是，那么它应该暂停它，将currentTime 设置为0 并销毁引用。

var a2 = new Audio('sounds/a2.wav');
var g2 = new Audio('sounds/g2.wav');
var currentChord = null; // Reference to know what sound is currently playing.
var keyIsPressed = false;

document.addEventListener('keydown', function(event) {
  if (keyIsPressed === false) {
    makeSound(event.key);
    keyIsPressed = true;
  }
});

document.addEventListener('keyup', function() {
  stopSound(); // Stop the sound when releasing the key.
  keyIsPressed = false;
});

function makeSound(key) {
  switch(key) {
    case "a":
      currentChord = a2; // Assign to currentChord.
      break;
    
    case "g":
      currentChord = g2; // Assign to currentChord.
      break;
  }

  currentChord.play(); // Play the currentChord.
};

function stopSound() {
  if (currentChord !== null) { // Check if there is a reference.
    currentChord.pause(); // Pause and..
    currentChord.currentTime = 0; // ..reset if there is..
    currentChord = null; // ..and then destroy the reference.
  }
}

【讨论】：

嗯，在 keyup 上暂停并没有我想象的那么好！我最终删除了那部分。但我注意到的一件事是，如果您按住键超过一秒钟，音频将开始快速暂停和播放。你知道无论如何要阻止它吗？
是的！我添加了一个 flag 来检查一个键是否已经被按下，并且只在第一个 keydown 事件时播放声音。