如何在JavaScript项目中管理多个音频文件

Question

当我点击第一个按钮时，冬季音频被加载，但当我点击夏季时，两者协同工作。当我点击其他按钮时，如何使冬季音频停止？我正在开发一个轻松的音乐网络应用程序。我可能最终拥有大约20或30个音乐文件。当我单击播放另一个文件时，如何使其停止？

document.getElementById('winter').onclick =  function changeBackground() {
document.body.style.backgroundImage = "url('winter.jpg')"
var audio = new Audio('winter.mp3');
audio.play();
}
document.getElementById('summer').onclick =  function changeBackground() {
document.body.style.backgroundImage = "url('summer.jpg')"
var audio = new Audio('summer.mp3');
audio.play();
}

Answer 1

您的实现是池式完成的，因为您正在changeBackground方法上创建new Audio()。因此，每次触发click事件时，这将创建一个新的audio。

但要回答您的问题，要停止audio，您必须使用在Audio API中定义的pause()方法。

这里有一个例子：

// First create the audios
var audioElements = document.querySelectorAll(".audio");
var audioObj = {};
// Create audios for each element
audioElements.forEach((el, i)=>
{
audioObj[el.getAttribute("data-name")] = new Audio((el.getAttribute("data-name") + ".mp3"));
});
// Methods to operate those audios
function playAudio(el)
{
var audioName = el.getAttribute("data-name");
// Create audios for each element
Object.keys(audioObj).forEach((keyName, i)=>
{
if(audioName != keyName)
{
audioObj[keyName].pause();
return;
}
audioObj[audioName].play();
console.log(audioName);
document.body.style.backgroundColor = audioName.concat(".png");
});
}
function changeBackground(imageSource)
{
document.body.style.backgroundImage = `url(${imageSource})`;
}

<button data-name="winter" class="audio winter" onclick="return playAudio(this)">Play Winter</button>
<button data-name="summer" class="audio summer" onclick="return playAudio(this)">Play Summer</button>
<button data-name="spring" class="audio spring" onclick="return playAudio(this)">Play Spring</button>

因此，在您的情况下，当点击另一个视频时，您可以pause()所有其他视频。我这样做只是为了控制两个音频。