个人中心
gpt4 book ai didi

javascript - JavaScript:当另一个音频样本正在播放时，如何停止和重新启动音频？

转载 作者：行者123 更新时间：2023-12-03 00:23:15 26 4
gpt4 key购买 nike

我正在创建一个吉他应用程序，当您按某些键时会弹奏和弦。我有根据您按的键播放音频的代码。现在只有A和G和弦起作用。但是，如果再次按相同的键或按另一个键，则音频仍将继续与新音频一起播放。我想在您按住琴键时停止当前声音。
我正在阅读有关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>

最佳答案

要暂停和重置音频，您需要引用当前播放的音频。现在，每次按键时您都在创建新的音频播放器，因此对音频的引用会丢失。
将您的音频和弦放在文件的顶部。每次按键事件我们都将使用相同的音频播放器。创建一个变量，该变量将保留对当前正在播放的音频的引用。
无论何时松开琴键，都应检查引用是否指向和弦音频播放器。如果是这样，则应暂停它，将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.
  }
}

关于javascript - JavaScript:当另一个音频样本正在播放时，如何停止和重新启动音频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64216555/

26 4 0
文章推荐： flutter - 如何使用AudioService.start中的params变量
文章推荐： elasticsearch - 现在以_timestamp中的格式进行日期
文章推荐： javascript - 音频与onmousedown一起在Javascript/CSS中切出过早
文章推荐： powershell - 通过 PowerShell 在 IIS 中设置应用程序设置
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com