你如何重叠变量（音频）？

Question

我正在创建一个Launchpad，其中一个音频文件在单击按钮时开始/停止。我有这个工作，但是当我尝试添加多个音频文件时，他们拒绝正确地重叠对方。当第一个音频文件播放时，第二个音频文件不会播放。有没有办法让这个工作？以下是2个按钮的示例，其中有2个独立的音频文件链接到它们。我希望重叠这些音频文件，以便在项目完成时（64个音频文件/按钮），用户可以将多个音频文件拼接在一起以创建自己独特的音轨。

JS：

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

HTML：

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

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

Answer 1

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

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

HTML

<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。