当用户在 jQuery 浏览器中赢得或输掉游戏时，如何安排播放音频

Question

功能：

音频在主游戏页面和其他页面播放，因此当用户赢得游戏时，在游戏页面切换到游戏祝贺页面时返回主音频之前会有游戏获胜通知声音。而当用户输掉游戏时，当游戏页面切换到GameOver页面时，会在恢复到主音频之前播放输掉游戏的提示音。

已完成：

我已经成功创建了主音频并且正在为所有页面播放。

问题：

我无法设置

1.) GameWin 提示音

2.) GameLost 通知声音

当用户在页面转换期间赢得或输掉游戏时播放。主音频仍在播放。

因此，在从游戏页面到游戏获胜页面或游戏失败页面的页面转换过程中，我如何设置在用户赢得或输掉游戏时播放通知音频。

我已附上代码供阅读..请帮助。

function initiateGameTimer() {
  CounterInterval = setInterval(function() {
    counter = counter + 1;
    timer = timer - 1;
    $('#GameTime').html(timer);
    console.log(timer);
    // Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
    if (timer == 0) {
      clearInterval(CounterInterval);
      if (x >= 1440) {
        $("#GamePage").hide();
        $("#Congratulations").show();
      } else if (x < 1440) {
        console.log("fail");
        $("#GamePage").hide();
        $("#GameOver").show();
      }
    }
  }, 1000)
}

<div id="GamePage" style="width:1920px; height:3840px; z-index=1;">

  <div id="jquery_jplayer_4" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/happy.mp3" loop autoplay>Your browser does not support this audio format</audio>

</div>

<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
  <div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/audioCongratulations.mp3" loop autoplay>Your browser does not support this audio format</audio>
</div>

<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
  <div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
  <audio src="lib/Elements/audiogameOver.mp3" loop autoplay>Your browser does not support this audio format</audio>
  <input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>

Answer 1

已解决。

可以通过以下方式完成：

function initiateGameTimer() {
  CounterInterval = setInterval(function() {
    counter = counter + 1;
    timer = timer - 1;
    $('#GameTime').html(timer);
    console.log(timer);
    // Gamce condition check when timer =0: position of the star < or > 2308(bottom page limit)
    if (timer == 0) {
      clearInterval(CounterInterval);
      if (x >= 1440) {
        var audioWon = document.getElementById("GameWon");
        audioWon.play();
        $("#GamePage").hide();
        $("#Congratulations").show();
      } else if (x < 1440) {
        console.log("fail");
        var audioLose = document.getElementById("GameLose");
        audioLose.play();
        $("#GamePage").hide();
        $("#GameOver").show();
      }
    }
  }, 1000)
}

<div id="Congratulations" style="display:none; width:1920px; height:3840px; z-index=2;">
  <audio id="GameWon" src="lib/Elements/GameCompleted.mp3">Your browser does not support this audio format</audio>
  <div id="jquery_jplayer_5" style="position:absolute; z-index:1;"></div>
</div>

<div id="GameOver" style="display:none; left:0; top:0; width:1920px; height:3840px; z-index=2; ">
  <audio id="GameLose" src="lib/Elements/GameFail.mp3">Your browser does not support this audio format</audio>
  <div id="jquery_jplayer_6" style="position:absolute; z-index:1;"></div>
  <input id="OK" type="image" src="lib/Elements/Ok.png" onclick="RevertPage()" />
</div>

我在每个 GameWon 和 GameOver 中添加了一个额外的 <audio> 标签，同时我设置为每个 <audio> 标签 ID 分配一个变量并调用方法 play() 在调用相应的 div id 时播放音频。

当用户在 jQuery 浏览器中赢得或输掉游戏时，如何安排播放音频

How to schedule audio to play when user win or lose a game in jQuery browser

javascript

audio

jquery

audio-streaming

html5-audio