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

Posted 2023-02-25

【中文标题】如何在用户在 jQuery 浏览器中输赢游戏时安排音频播放

【英文标题】：How to schedule audio to play when user win or lose a game in jQuery browser

【发布时间】：2015-12-01 14:13:21

【问题描述】：

功能：

音频在游戏主页面和其他页面播放，因此当用户赢得游戏时，当游戏页面变为游戏祝贺页面时，会在恢复主音频之前有一个游戏获胜通知声音。而当用户输掉游戏时，当游戏页面切换到 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>

【问题讨论】：

看那里developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement它可能更容易实现你想要的

您可以在需要时简单地在音频元素上调用play()。

-标签支持一堆事件，例如在这里记录：w3schools.com/tags/ref_av_dom.asp 或谷歌“html5 音频事件”

感谢@RoryMcCrossan。找到了方法..

【参考方案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。