如何在一个 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，您必须使用音频 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() 所有其他视频。我这样做只是为了控制两个音频。