SoundJS로 재생/일시 정지를 전환하려면 어떻게합니까?

SoundJS를 사용하여 Psuedo MPC를 작성합니다. 원하는 방식으로 프로그래밍 된 사운드 키트 단추가 있지만 원하는대로 작동하도록 루프를 가져올 수 없습니다.SoundJS로 재생/일시 정지를 전환하려면 어떻게합니까?

사용자가 "loop1"을 클릭하여 재생하고 싶습니다.
사용자가 "loop1"을 다시 클릭하면 중지하고 다시 설정해야합니다.
"loop1"이 재생되는 동안 사용자가 "loop2"를 클릭하면 "loop1"이 중지되고 "loop2"가 재생되기 시작하면서 재설정됩니다.

어떻게이 문제를 마스터 할 수 있습니까? 경고, 저는 UI/UX 디자이너로서 마음에두고 여전히 자바 스크립트를 배우므로, 설명 할 때 좀 더 자세히 설명해 주면 좋을 것 같습니다. 감사!

여기 아래에있는 내 코드의 일부를하지만, 행동에서 볼 여기 확인 : 당신이 변수에 할당하여 그것들을 연주하기 시작 한 후 소리를 수정할 수 있습니다 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>

출처

2015-01-14 madebyporter

합니다. 이 경우 변수 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)라는 이름의 새를 만들 것을 권장합니다. 그러나 그것은 당신에게 달려 있습니다. 당신이 변수에 createjs.Sound.play()를 할당 할 때

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

는 변수는 AbstractSoundInstance 객체가된다. 이 변수로 더 많은 것을 할 수 있는지 배우고 싶다면 here's the documentation 많은 멋진 방법으로 수정할 수 있습니다.

출처

2015-01-14 02:47:49 Marquizzo

나는 변화를 만들었고 또한 기능을 분리했다. 루프는 서로를 멈출 수 있지만 루프는 멈추지 않습니다. 루프를 연주하고 멈추려 고하면 다시 재생됩니다. 나는 여러 가지 수정 프로그램을 시도하고 아무데도 갈 수 없었다. 그게 뭐라고 생각하니? 모든 것을 업로드했습니다 : http://nowthatsgenius.com/clients/beatbox/ 모든 코드는 소스의 한 페이지에 있습니다. 감사합니다. – madebyporter

루프가 멈추지 않는다는 것은 무엇을 의미합니까? 나는 loop1을 클릭했을 때 처음부터 재설정하고 다시 재생하기를 원한다고 생각했다. 첫 번째 클릭에서 재생하고 두 번째 클릭에서 중단하고 세 번째 클릭에서 0부터 다시 시작 하시겠습니까? – Marquizzo

사과드립니다. 내가 단순화하려고하자. 사용자가 loop1을 클릭한다. 루프 1이 재생됩니다. loop1이 재생되는 동안 사용자가 loop1을 클릭하면 loop1이 중지됩니다. loop1이 재생되는 동안 사용자가 loop2를 클릭하면 loop1이 재생을 멈추고 loop2가 재생되기 시작합니다. 두 루프는 동시에 재생하면 안됩니다. 사용자가 "loop1"을 클릭하면 피아노 키보드 나 MPC처럼 "loop1"버튼이 깜박이기 때문에 별도의 켜기/끄기 버튼을 원하지 않습니다. – madebyporter

SoundJS로 재생/일시 정지를 전환하려면 어떻게합니까?

답변

관련 문제