如何在SoundJS中切換播放/暫停？

Question

我正在使用SoundJS來構建偽MPC。 我已經按照所需的方式對聲音工具包按鈕進行了編程，但是我無法使循環以所需的方式工作。

我希望用戶單擊“ loop1”，它會播放。
如果用戶再次單擊“ loop1”，它將停止並重置。
如果用戶在播放“ loop1”時單擊“ loop2”，則“ loop1”將停止並在“ loop2”開始播放時重置。

我該如何解決這個問題。 警告，我是一位UI / UX設計師，仍然在學習Javascript，因此，如果您能在解釋時給我更多細節，那就太好了。 謝謝！

這是下面的一些代碼，但要查看實際運行情況，請在此處查看： 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

您可以在開始播放聲音后通過將其分配給變量來修改聲音。 在這種情況下，我創建了變量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對象。 您可以通過許多很酷的方式對其進行修改，如果您想了解更多有關這些變量的信息，請參見以下文檔。

如何在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