javascript - 如何重叠变量？

Question

我正在创建一个启动板，其中单击按钮时会启动/停止音频文件。我可以正常工作，但是当我尝试添加多个音频文件时，它们拒绝正确地相互重叠。当第一个音频文件正在播放时，第二个音频文件将不会播放。有办法让它发挥作用吗？下面是 2 个按钮的示例，其中链接了 2 个单独的音频文件。我想重叠这些音频文件，以便当项目完成时(64 个音频文件/按钮)，用户可以将多个音频文件拼凑在一起以创建自己独特的轨道。

var one = new Audio();
one.src = "files/audio/one.wav";
one.loop = true;

var two = new Audio();
two.src = "files/audio/two.wav";
two.loop = true;

var isPlaying = false;

function manage1() {
  if (isPlaying) {
    one.pause();
    isPlaying = false;
    one.currentTime = 0;
  } else {
    one.play();
    isPlaying = true;
    one.currentTime = 0;
  }
}

function manage2() {
  if (isPlaying) {
    two.pause();
    isPlaying = false;
    two.currentTime = 0;
  } else {
    two.play();
    isPlaying = true;
    two.currentTime = 0;
  }
}

<img class="item" src="files/button.png" onclick="manage1();" />
<img class="item" src="files/button.png" onclick="manage2();" />

Answer 1

您需要为播放/暂停跟踪器使用两个不同的变量。

此处，isPlaying 跟踪您的第一个音频，isSecondPlaying 跟踪您的第二个音频。

var one = new Audio(); one.src = "files/audio/one.wav"; one.loop = true;

var two = new Audio(); two.src = "files/audio/two.wav"; two.loop = true;

var isPlaying = false;
var isSecondPlaying = false;

function manage1(){
  if(isPlaying){
    one.pause();
    isPlaying = false;
        one.currentTime = 0;
  }
  else{
    one.play();
    isPlaying = true;
        one.currentTime = 0;
  }
}

function manage2(){
  if(isSecondPlaying ){
    two.pause();
    isSecondPlaying = false;
        two.currentTime = 0;
  }
  else{
    two.play();
    isSecondPlaying = true;
        two.currentTime = 0;
  }
}

但是:

如果您想对 64 个音频文件执行此操作，您可能需要重新考虑您的方法:

var audio = [];
var isPlaying = [];

function manage(id) {
  if (isPlaying[id]) {
    audio[id].pause();
    isPlaying[id] = false;
    audio[id].currentTime = 0;
  } else {
    audio[id].play();
    isPlaying[id] = true;
    audio[id].currentTime = 0;
  }
}

function createAudio(src, i) {
  audio[i] = new Audio();
  audio[i].src = src;
  audio[i].loop = true;
  isPlaying[i] = false;
}

var mySources = ['path/to/1.wav', 'path/to/2.wav', 'path/to/3.wav', 'path/to/4.wav', 'path/to/5.wav'];

for (var i = 1; i <= mySources.length; i++) {
  createAudio(mySources[i - 1], i);
}

<img class="item" src="files/button.png" onclick="manage(1);" />
<img class="item" src="files/button.png" onclick="manage(2);" />
<img class="item" src="files/button.png" onclick="manage(3);" />
<img class="item" src="files/button.png" onclick="manage(4);" />
<img class="item" src="files/button.png" onclick="manage(5);" />

要初始化音频，只需调用 createAudio('yourAudio.wav',1); 并更改来源和 ID。