CODEWITHSUNDEEP
javascript
Stephen
Stephen

Reputation: 23

How do I switch between functions every 5 seconds looped ten times?

I'm working on a function that would switch the color of an element and play an audio file at the same time. Each would be for, or a pause between, 5 seconds 10 times.

Here's my code:

const stop = 10;
for(var i = 0; i <= stop; i++){
window.setTimeout(function() {
    $.playSound('design_tools/music/tense.m4a'); // https://github.com/admsev/jquery-play-sound
    $( "#tight" ).toggleClass("river"); // Blue

    window.setTimeout(function() {
        $.playSound('design_tools/music/release.m4a');
        $( "#tight" ).toggleClass("sun"); // Yellow
    }, 5000); 

}, 5000);


}

This code is what I'm looking for as in functionality, but the color change wasn't in sync with the music and it doesn't executed ten separate times. It just switches color and plays the audio files once.

** I just noticed that admsev changed his code, but I'm still using one of his earlier releases. Here it is in case you wanted to test it out:

/**
 * @author Alexander Manzyuk <[email protected]>
 * Copyright (c) 2012 Alexander Manzyuk - released under MIT License
 * https://github.com/admsev/jquery-play-sound
 * Usage: $.playSound('http://example.org/sound.mp3');
**/

(function($){

  $.extend({
    playSound: function(){
      return $("<embed src='"+arguments[0]+"' hidden='true' autostart='true' loop='false' class='playSound'>").appendTo('body');
    }
  });

})(jQuery);

Upvotes: 0

Views: 61

Answers (2)

mplungjan
mplungjan

Reputation: 178285

You may have to switch the class or sound around, but try this

var count=10,tId;

function toggleSound() {
  if (--count==0) {
    clearInterval(tId); // stop
    return;
  }
  $("#tight").toggleClass("river sun"); // toggle the classes
  $.playSound($("#tight").hasClass("sun")? // play matching music
   'design_tools/music/release.m4a' :
   'design_tools/music/tense.m4a');
}
tId = setInterval(toggleSound,5000);

Test example

function playSound(sound) {
  $("body").append('<br />'+sound)
}

var count=10,tId;

function toggleSound() {
  if (--count==0) {
    clearInterval(tId); // stop
    return;
  }
  $("#tight").toggleClass("river sun"); // toggle the classes
  playSound($("#tight").hasClass("sun")? // play matching music
   'design_tools/music/release.m4a' :
   'design_tools/music/tense.m4a');
}
tId = setInterval(toggleSound,5000);
.river { background-color:blue }
.sun { background-color:yellow }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tight" class="river">This is tight</div>

Upvotes: 0

pishpish
pishpish

Reputation: 2614

You could use stop as a decrementing counter and check if it is even or odd.

var stop = 10;

var changeColor = function(){

  if( stop % 2 === 0 ){
    $.playSound('design_tools/music/tense.m4a');
    $( "#tight" ).toggleClass("river");
  }
  else{
    $.playSound('design_tools/music/release.m4a');
    $( "#tight" ).toggleClass("sun");
  }
  stop--;
  if( stop > 0 )
    window.setTimeout( changeColor, 5000 ); 

};

changeColor();

Upvotes: 1

Related Questions