Question

我正在创建一个Launchpad，其中一个音频文件在单击按钮时启动/停止。我有这个工作，但当我尝试添加多个音频文件时，他们拒绝正确地相互重叠。播放第一个音频文件时，第二个音频文件将无法播放。有没有办法让这个工作？下面是2个按钮的示例，其中包含2个单独的音频文件。我希望重叠这些音频文件，以便在项目完成时（64个音频文件/按钮），用户可以拼凑多个音频文件以创建自己独特的音轨。

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

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;
  }
}

<强> BUT ：

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

＆＃13;

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);
}

＆＃13;

<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);" />

＆＃13;

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

你如何重叠变量？

1 个答案: