Javascript 单击，背景图像和音乐会发生变化。然而，音乐一直在平行播放。对于20个音乐文件，最有效的方法是什么？

目前正在开发一款轻松的音乐应用程序。我尝试了下面的方法，但选择新的时背景音乐会一直播放。对多个文件执行此操作的有效方法是什么？例如，我只添加了2个

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

---

音乐一直在播放，因为你根本没有阻止它。在播放您想要的歌曲之前，您需要暂停每首歌曲。要做到这一点，您需要将音频对象存储在一个对象中，并且在每次事件之后，您需要循环播放所有音频，暂停它们，然后重新启动您想要播放的音频。它应该是这样的：

const songs = {
    winter: new Audio('winter.mp3'),
    spring: new Audio('spring.mp3'),
    summer: new Audio('summer.mp3'),
}

function changeBackground(background) {
    document.body.style.backgroundImage = background
}

function changeBackgroundAndSong(background) {
    for (let song in songs) {
        song.pause()
    }
    changeBackground(background)
    songs[background].currentTime = 0;
    songs[background].play()
}

document.getElementById('fall') = fall.addEventListener('click', changeBackground.bind(this, fall.id))
document.getElementById('winter') = winter.addEventListener('click', changeBackground.bind(this, winter.id))
document.getElementById('spring') = spring.addEventListener('click', changeBackground.bind(this, spring.id))
document.getElementById('summer') = summer.addEventListener('click', changeBackground.bind(this, summer.id))

然后，要在多个背景下完成这项工作，您应该为您提供一个相同的类，并执行查询选择器或all，然后通过循环执行相同的工作：

const backgrounds = [...document.querySelectorAll('.backgrounds')];

backgrounds.forEach(backgroundEl => {
    if(backgroundEl.id === 'fall') backgroundEl.addEventListener('click', changeBackground(this, backgroundEl.id))
    else backgroundEl.addEventListener('click', changeBackgroundAndSong.bind(this, backgroundEl.id))
})