Javascript 如何使用SoundJS切换播放/暂停？

我正在使用SoundJS构建一个psuedo MPC。我已经按我想要的方式编程了音响套件按钮，但我无法按我想要的方式让环路工作

• 我想让用户点击“loop1”并播放
• 如果用户再次单击“loop1”，则应停止并重置
• 如果用户在“loop1”播放时单击“loop2”，则在“loop2”开始播放时，“loop1”停止并重置

我怎样才能掌握这个问题。警告，我本质上是一个UI/UX设计师，还在学习Javascript，所以如果你能在解释时给我更多的细节，那就太好了。谢谢

下面是我的一些代码，但要查看它的运行情况，请检查此处：

循环1
循环2

V1


















var预载；
函数init（）{
如果（！createjs.Sound.initializeDefaultPlugins（））{
document.getElementById（“错误”）.style.display=“块”；
document.getElementById（“内容”）.style.display=“无”；
返回；
}
var assetsPath=“资产/”；
变量声音=[
{id:“loop1”，src:“loop1.mp3”}，
{id:“loop2”，src:“loop2.mp3”}，
{id:“a1”，src:“snare.wav”}，
{id:“a2”，src:“kick1.wav”}，
{id:“a3”，src:“clap1.wav”}，
{id:“a4”，src:“closedhat.wav”}，
{id:“a5”，src:“cymbal.wav”}，
{id:“a6”，src:“kick2.wav”}，
{id:“a7”，src:“clap2.wav”}，
{id:“a8”，src:“openhat.wav”}，
{id:“a9”，src:“voice1.wav”}，
{id:“a10”，src:“voice2.wav”}，
];
$（'.player controls button'）.attr（“disabled”，true）；
createjs.Sound.alternateExtensions=[“mp3”]；
createjs.Sound.addEventListener（“文件加载”，createjs.proxy（handleLoadComplete，this））；
createjs.Sound.registerSounds（声音、资产路径）；
}
功能播放声音（目标）{
var instance=createjs.Sound.play（target.id，createjs.Sound.INTERRUPT\u NONE）；
$（“.player控制按钮”）。单击（函数（事件）{
if（instance.playState==createjs.Sound.PLAY_成功）{
instance.stop（）；
} 
否则{
play（target.id，createjs.Sound.INTERRUPT\u NONE）；
}
});
log（instance.playState）；
}

开始播放声音后，可以通过将声音分配给变量来修改声音。在本例中，我创建了变量

loop1

和

loop2

// Creating variables outside playSound() so they exist in the global scope.
var loop1 = null;
var loop2 = null;

function playSound(target) {
    if(loop1){  // If loop1 exists, stop it.
        loop1.stop();
    }
    if(loop2){  // If loop2 exists, stop it.
        loop2.stop();
    }


    if(target.id == "loop1"){
        // Assign value to var loop1
        loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
    else if(target.id == "loop2"){
        // Assign value to var loop2
        loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
    else{
        // Otherwise, create generic sound
        var instance = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }

    $(".player-controls-button").click(function(event) {
        if (instance.playState == createjs.Sound.PLAY_SUCCEEDED) {
            instance.stop();
        }else {
            instance.play(target.id, createjs.Sound.INTERRUPT_NONE);
        }
    });

    console.log(instance.playState);
}

我建议您将声音效果的

playSound（target）

功能分开，并为音乐循环创建一个名为

playLoop（target）

的新功能，以便于阅读。但这取决于你

第2版

var loop1 = null;
var loop2 = null;
function playLoop(target){

    // If loop1 exists, stop it and delete it
    if(loop1){
        loop1.stop();
        loop1 = null;
    }else if(target.id == "loop1"){
        loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }

    // If loop2 exists, stop it and delete it
    if(loop2){
        loop2.stop();
        loop2 = null;
    }else if(target.id == "loop2"){
        loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
}

---

将createjs.Sound.play（）指定给变量时，该变量将成为

AbstractSoundInstance

对象。如果您想了解这些变量还能做些什么，您可以用许多很酷的方法对其进行修改。

因此，我做了一些更改，并分离了函数。循环可以相互停止，但循环本身无法停止。如果你玩一个循环，并试图阻止它，它只是再次播放。我尝试了很多不同的修复方法，但都没有成功。你认为是什么？我已经上传了所有内容：所有代码都在源代码的一页上。谢谢你说循环不能自行停止是什么意思？我想，当你点击

loop1

时，你希望它重新设置并从头开始播放。您希望它在第一次单击时播放，然后在第二次单击时停止，然后在第三次单击时从0重新开始吗？我很抱歉。让我试着简化一下：用户点击loop1。循环1播放。在loop1播放时，如果用户单击loop1，loop1将停止。在loop1播放时，如果用户单击loop2，则loop1停止播放，loop2开始播放。两个循环不应同时播放。我不想要单独的开/关按钮，因为当用户单击“loop1”时，“loop1”按钮将闪烁，就像钢琴键盘或MPC一样。好的，我编辑了我的响应，将版本2包含在我的原始代码下面。此

playLoop（）

函数将在循环不存在时启动循环，或在循环已在播放时停止循环。如果单击

loop2

，它也将停止

loop1

，反之亦然。

var loop1 = null;
var loop2 = null;
function playLoop(target){

    // If loop1 exists, stop it and delete it
    if(loop1){
        loop1.stop();
        loop1 = null;
    }else if(target.id == "loop1"){
        loop1 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }

    // If loop2 exists, stop it and delete it
    if(loop2){
        loop2.stop();
        loop2 = null;
    }else if(target.id == "loop2"){
        loop2 = createjs.Sound.play(target.id, createjs.Sound.INTERRUPT_NONE);
    }
}