如何在SoundJS中切换播放/暂停？

Question

Im using SoundJS to build a psuedo MPC. 我正在使用SoundJS来构建伪MPC。 I have the sound kit buttons programmed the way I want, but I cannot get the loops to work the way I want. 我已经按照所需的方式对声音工具包按钮进行了编程，但是我无法使循环以所需的方式工作。

I would like the user to click on "loop1" and it plays. 我希望用户单击“ loop1”，它会播放。
If the user clicks "loop1" again, it should stop and resets. 如果用户再次单击“ loop1”，它将停止并重置。
If the user clicks "loop2" while "loop1" is playing, then "loop1" stops and resets while "loop2" starts to play. 如果用户在播放“ loop1”时单击“ loop2”，则“ loop1”将停止并在“ loop2”开始播放时重置。

How could I master this problem. 我该如何解决这个问题。 Warning, I'm a UI/UX designer at heart and still learning Javascript, so if you could give me a bit more detail when explaining, that would be great. 警告，我是一位UI / UX设计师，仍然在学习Javascript，因此，如果您能在解释时给我更多细节，那就太好了。 Thanks! 谢谢！

Here's some of my code below, but to see it in action, check here: http://nowthatsgenius.com/clients/beatbox/ 这是下面的一些代码，但要查看实际运行情况，请在此处查看： http : //nowthatsgenius.com/clients/beatbox/

<body onload="init();">
    <section class="player-container">
        <article class="player-controls">
            <ul class="player-controls">
                <li class="player-controls-button" id="loop1" onclick="playSound(this)">Loop 1</li>
                <li class="player-controls-button" id="loop2" onclick="playSound(this)">Loop 2</li>
            </ul>
        </article>
    </section>
    <section class="mpc-container">
        <article class="mpc-title mpc-col">
            <span class="text">V1</span>
        </article>
        <article class="mpc-controls mpc-col">
            <ul class="mpc-controls-wrap">
                <li class="mpc-controls-row">
                    <ul>
                        <li class="mpc-controls-button" id="a1" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a2" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a3" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a4" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a5" onclick="playSound(this)"></li>
                    </ul>
                    <ul>
                        <li class="mpc-controls-button" id="a6" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a7" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a8" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a9" onclick="playSound(this)"></li>
                        <li class="mpc-controls-button" id="a10" onclick="playSound(this)"></li>
                    </ul>
                </li>
            </ul>
        </article>
    </section>

    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://code.createjs.com/soundjs-0.6.0.min.js"></script>
    <script>
        var preload;

        function init() {
            if (!createjs.Sound.initializeDefaultPlugins()) {
                document.getElementById("error").style.display = "block";
                document.getElementById("content").style.display = "none";
                return;
            }

            var assetsPath = "assets/";
        var sounds = [
                {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("fileload", createjs.proxy(handleLoadComplete, this));
        createjs.Sound.registerSounds(sounds, assetsPath);
      }


        function playSound(target) {

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


    </script>

</body>

Answer 1

You can modify sounds after you've started playing them by assigning them to a variable. 您可以在开始播放声音后通过将其分配给变量来修改声音。 In this case, I've created variables loop1 and loop2 . 在这种情况下，我创建了变量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);
}

I recommend you separate your playSound(target) function for sound effects, and create a new one named playLoop(target) for your music loops, just to make it easier to read. 我建议您分离playSound(target)函数以获得声音效果，并为您的音乐循环创建一个名为playLoop(target)的新函数，以使其易于阅读。 But that's up to you. 但这取决于你。

Version 2 版本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);
    }
}

When you assign createjs.Sound.play() to a variable, the variable becomes an AbstractSoundInstance object. 当您将createjs.Sound.play（）分配给变量时，该变量将成为AbstractSoundInstance对象。 You can modify it in many cool ways, here's the documentation if you want to learn what more you can do with these variables. 您可以通过许多很酷的方式对其进行修改，如果您想了解更多有关这些变量的信息，请参见以下文档。

如何在SoundJS中切换播放/暂停？

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-01-14 02:47:49

如何在SoundJS中切换播放/暂停？

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-01-14 02:47:49

解决方案1
2 已采纳 2015-01-14 02:47:49