Question

我正在开发一种能够切换元素颜色并同时播放音频文件的功能。每个都是5秒或10秒之间的暂停。

这是我的代码：

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


}

此代码是我在功能方面所寻求的，但颜色变化与音乐不同步，并且不会分十次执行。它只是切换颜色并播放音频文件一次。

**我刚刚注意到admsev改变了他的代码，但我仍在使用他早期的一个版本。在这里，如果你想测试它：

/**
 * @author Alexander Manzyuk <admsev@gmail.com>
 * 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);

Answer 1

你可以使用stop作为递减计数器并检查它是偶数还是奇数。

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

Answer 2

你可能需要切换类或声音，但试试这个

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

测试示例

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>

如何每隔5秒在功能之间切换十次？

2 个答案: