在JavaScript中添加类并播放声音的最佳方法

我正在做一个“西蒙说”的游戏，我想让一个div处于活动状态，并在div处于活动状态时播放相同的声音。然后我想删除该类并停止声音，然后转到下一个div

到目前为止，我已经解决了如何在特定的时间段内添加一个类；但是，我如何才能播放相同时间的声音？此功能是

simonSequence（）

函数的一部分。谢谢

代码：

//变量
var validMov；
最小值为0，最大值为4；
var boardSeq=[]；
var userSeq=[]；
var boardSound={
红色：“http://www.soundjay.com/button/sounds/button-09",
蓝色：“http://www.soundjay.com/button/sounds/button-7",
黄色：“http://www.soundjay.com/button/sounds/button-10",
绿色：“http://www.soundjay.com/button/sounds/button-4"
}
$（文档）.ready（函数（）{
})
//1-棋盘第一次从0到3（4）生成随机数字
函数simonSequence（）{
var random=Math.floor（Math.randon（）*（max+min））；
按顺序推送（随机）；
对于（变量i=0；i

钢笔：

---

有很多方法来构建这个，但类似的东西应该可以工作

var boardSound = [
  new Audio("http://www.soundjay.com/button/sounds/button-09"), // RED
  new Audio("http://www.soundjay.com/button/sounds/button-7"), // BLUE
  new Audio("http://www.soundjay.com/button/sounds/button-10"), // YELLOW
  new Audio("http://www.soundjay.com/button/sounds/button-4") // GREEN
]

function playSound(audio) {
  audio.play();
}

function stopSound(audio) {
  audio.pause();
  audio.currentTime = 0;
}

然后在更改类的同一位置使用这些函数

function simonSequence() {
  var random = Math.floor(Math.randon() * (max + min));
  boardSeq.push(random);
  for(var i = 0; i < boardSeq.length; i++) {
    $("#"+boardSeq[i]).addClass("active");
    playSound(boardSound[boardSeq[i]]);
    setTimeout(function() {
      $("#"+boardSeq[i]).removeClass("active")
      stopSound(boardSound[boardSeq[i]]);
    }, 500);
  }
}

函数simonSequence（）{
var random=Math.floor（Math.randon（）*（max+min））；
按顺序推送（随机）；
对于（变量i=0；i

更新 添加了请求的功能-独占

.active

类切换

音频精灵 使用音频精灵是为浏览器游戏播放音效的最有效方式

• 您只加载一个MP3。按照OP的方式，您不仅需要最终加载4个文件，还需要不断更改

  .src

• 使用

  timeupdate

  事件没有延迟，因为
• 制作一个很简单：
• 获取4个短（@.5秒）MP3文件
• 使用在线服务或程序*将所有4个文件合并为一个文件

*我用

以下演示已将音频精灵加载到

中。每个

将播放音频精灵的.5秒部分

详细信息将在演示中进行注释

演示

var-taps=0；
//参考文献
var fx=document.getElementById（'fx'）；
//参考文献
var main=document.forms.main
/*在表单#main上注册单击事件
||单击时。。。
*/
main.addEventListener（'click'，函数（e）{
//这是单击的元素
var tgt=e.target；
//如果此单击的元素是。。。
如果（tgt.tagName==='按钮'）{
//将其中的所有按钮收集到节点列表中
var buttons=this.querySelectorAll（'button'）；
/*每个按钮都将删除class.active
||不管他们是否真的拥有它。
*/
按钮。forEach（功能（btn、idx）{
btn.classList.remove（'active'）；
});
/*现在将.active类添加到e.target中
||我们知道没有其他人拥有它。
*/
tgt.classList.add（'active'）；
//通过开关传递其ID。。。
开关（tgt.id）{
/*每个人将只播放一个0.5秒的剪辑
||的2sec MP3。
*/
案例“g”：
fx.currentTime=.03；
fx.play（）；
fx.ontimeupdate=函数（）{
如果（fx.currentTime>=.75）{
暂停（）；
}
}
打破
案例“r”：
fx.currentTime=.77；
fx.play（）；
fx.ontimeupdate=函数（）{
如果（fx.currentTime>=1.123）{
暂停（）；
}
}
打破
案例“y”：
fx.currentTime=1.124；
fx.play（）；
fx.ontimeupdate=函数（）{
如果（fx.currentTime>=1.134）{
暂停（）；
}
}
打破
案例“b”：
fx.currentTime=1.135；
fx.play（）；
fx.ontimeupdate=函数（）{
如果（fx.currentTime>=1.29）{
暂停（）；
}
}
打破
违约：
fx.currentTime=1.30；
fx.play（）；
fx.ontimeupdate=函数（）{
如果（fx.currentTime>=1.46）{
暂停（）；
}
}
打破
}
}
taps++；
main.display.value=抽头；
});
#主{
显示器：flex；
柔性流：行换行；
宽度：140px；
}
钮扣{
宽度：64px；
高度：48px；
光标：指针；
显示：内联块；
}
#g{
背景：绿色；
边界左上半径：60%；
顺序：1；
过渡：背景。5s；
}
#g:主动的{
背景：石灰；
过渡：背景。5s；
}
#r{
背景：7万人；
边界右上角半径：60%；
顺序：2；
过渡：背景。5s；
}
#r:主动的{
背景#ff9b9b；
过渡：背景。5s；
}
#y{
背景#cece00；
;
边界左下半径：60%；
顺序：3；
过渡：背景。5s；
}
#y:主动{
背景：#ff0；
过渡：背景。5s；
}
#b{
背景：蓝色；
边框右下半径：60%；
顺序：4；
过渡：背景。5s；
}
#b:主动的{
背景：青色；
过渡：背景。5s；
}

0
function simonSequence() {
  var random = Math.floor(Math.randon() * (max + min));
  boardSeq.push(random);
  for(var i = 0; i < boardSeq.length; i++) {
    $("#"+boardSeq[i]).addClass("active");
    playSound(boardSound[boardSeq[i]]);
    setTimeout(function() {
      $("#"+boardSeq[i]).removeClass("active")
      stopSound(boardSound[boardSeq[i]]);
    }, 500);
  }
}