当另一个音频开始时停止播放音频

Question

此代码非常适合在单击按钮时播放随机音频文件，这是我想要的。唯一的问题是我希望在再次单击按钮时停止当前音频，这样它就不会播放下一个文件。任何关于如何实现这一点的想法将不胜感激！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<audio id="sound0" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound1" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound2" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="sound3" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg"></audio>

<button id="button">Click To Play</button>

$( document ).ready(function() {
function playSound(){
  var pattern = [],
    tone;
  pattern.push(Math.floor(Math.random() * 4));
  tone = "#sound" + pattern[0];
  //$(tone).trigger('play');  //uncomment to play
  //$(tone).get(0).play();    //uncomment to play
  $(tone)[0].play();          //comment to turn off
}

$("#button").click(playSound);

});

Answer 1

使用一组声源。
使用 new Audio() 并播放那个。

const sounds = [
  "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
  "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"
];

const audio = new Audio();

function playSound(){
  const rand = Math.floor(Math.random() * sounds.length);
  audio.src = sounds[rand];
  audio.play();
}

document.querySelector("#button").addEventListener("click", playSound);

<button id="button">Click To Play</button>

如果您想收听“已结束”并播放另一个音频文件，只需使用：

audio.addEventListener("ended", playSound);

Answer 2

非jQuery解决方案：

var sound0 = document.getElementById("sound0");
var sound1 = document.getElementById("sound1");

sound1.onplay = function() {
  sound0.pause();
}

这段代码的作用是，每当 sound1 音频开始播放时，它会暂停 sound0 音频。

当另一个音频开始时停止播放音频

stop audio from playing when another audio starts

javascript

random

audio

jquery