基于jQuery的无冲突游戏音频系统

Question

我对播放音频感到困惑，我使用jQuery。 在我的html应用程序中，

   <div id="page-029">
   <div class="invisible-exe" data-pageload-run="$('.ambience-04').trigger('play');$('.paper-flip-sfx').play()"></div>

   <h1>A Nightingale’s Cove</h1>
   <p>Later the pirates' flipcanons had set the quick brown fox to shriveling yet so long story chapter’s paragraph.</p>

   <button data-click-run="$('.button-click-sfx').trigger('play')">Page 30</button>

   </div> <!-- END of page 29 -->
   
   <div id="page-030">
   <div class="invisible-exe" data-pageload-run="$('.ambience-04').trigger('play');$('.paper-flip-sfx').play()"></div>

   <p>You’re about to encountering The Marshmallow Brigand. Would you save your progress so far?</p>
   <button data-click-save data-click-run="$('.button-click-sfx').trigger('play')">Save the progress</button>

   <p>And let’s see what this big galleon made of! Funny broken grammars into the battle!</p>
   <button data-click-run="$('.button-click-sfx').trigger('play')">Page 31</button>

   </div> <!-- END of page 30 -->

   <audio class="ambience-03" src="audio/BGM_03.ogg" type="audio/ogg"></audio>
   <audio class="ambience-04" src="audio/BGM_04.ogg" type="audio/ogg"></audio>
   <audio class="ambience-05" src="audio/BGM_05.ogg" type="audio/ogg"></audio>
   <audio class="ambience-06" src="audio/BGM_06.ogg" type="audio/ogg"></audio>

   <audio class="button-click-sfx" src="audio/click_sound.ogg" type="audio/ogg"></audio>
   <audio class="paper-flip-sfx" src="audio/paper_flip.ogg" type="audio/ogg"></audio>
   <audio class="canon-boom-sfx" src="audio/canon_boom.ogg" type="audio/ogg"></audio>
   <audio class="sword-clang-sfx" src="audio/sword_clang.ogg" type="audio/ogg"></audio>

问题是:

-我怎么能有一个页面播放BGM_04歌曲时，该页面被加载，但所有其他歌曲，包括BGM_03，必须是当前正在运行，以不也运行？

-如果第30页（下一页）的标签中仍有BGM_04，如何使歌曲不停止，也不从一开始就运行，而是持续运行？

-如何使按钮点击和其他sfx的声音不干扰歌曲？

[data-pageload-run]等只是一个例子，它们使用的是分离的脚本，但它们工作得很好。 该函数类似于but，用于每个fadeIn页面。 不是问题所在。 是音响系统让我迷惑了。 希望有人能告诉我怎么做。

Answer 1

更新:但是现在背景音乐是双倍播放，就像多个层一样，每当执行另一个音频的事件启动时，它会在层上添加新的音频。

如何使它只播放一个bgm一次？

/* !!! ADDED — [data-load-bgm] playing background music. !!! */
thisLabel = "data-load-bgm";
if ($element.hasAttr(thisLabel)){
(function(){

var bgmLink = Util.getAttributeValue($element, thisLabel, 1);
var bgmLinkVol = Util.getAttributeValue($element, thisLabel, 2);
var noVolValue = Util.isUndefined($element, thisLabel, 2);
var volValue = 0;
var bgm = "song0";
var bgmAll = $(".bgm-1, .bgm-2, .bgm-3, .bgm-4, .bgm-5, .bgm-6, .bgm-7, .bgm-8, .bgm-9, .bgm-10");
var bgm1 = $(".bgm-1");
var bgm2 = $(".bgm-2");
var bgm3 = $(".bgm-3");
var bgm4 = $(".bgm-4");
var bgm5 = $(".bgm-5");
var bgm6 = $(".bgm-6");
var bgm7 = $(".bgm-7");
var bgm8 = $(".bgm-8");
var bgm9 = $(".bgm-9");
var bgm10 = $(".bgm-10");

if (volValue == 0){bgmVol = 0.5};
if (bgmLinkVol != noVolValue){bgmVol = bgmLinkVol;}

if (bgmLink == "vol"){bgmAll.animate({volume: bgmLinkVol}, 600);bgmVol = bgmLinkVol;}

if (bgmLink == "bgm1"){
if (bgm == "song1"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm1.prop("volume", 0);setTimeout(function(){
bgm1.trigger("play");
bgm1.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song1";}}

if (bgmLink == "bgm2"){
if (bgm == "song2"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm2.prop("volume", 0);setTimeout(function(){
bgm2.trigger("play");
bgm2.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song2";}}

if (bgmLink == "bgm3"){
if (bgm == "song3"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm3.prop("volume", 0);setTimeout(function(){
bgm3.trigger("play");
bgm3.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song3";}}

if (bgmLink == "bgm4"){
if (bgm == "song4"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm4.prop("volume", 0);setTimeout(function(){
bgm4.trigger("play");
bgm4.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song4";}}

if (bgmLink == "bgm5"){
if (bgm == "song5"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm5.prop("volume", 0);setTimeout(function(){
bgm5.trigger("play");
bgm5.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song5";}}

if (bgmLink == "bgm6"){
if (bgm == "song6"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm6.prop("volume", 0);setTimeout(function(){
bgm6.trigger("play");
bgm6.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song6";}}

if (bgmLink == "bgm7"){
if (bgm == "song7"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm7.prop("volume", 0);setTimeout(function(){
bgm7.trigger("play");
bgm7.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song7";}}

if (bgmLink == "bgm8"){
if (bgm == "song8"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm8.prop("volume", 0);setTimeout(function(){
bgm8.trigger("play");
bgm8.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song8";}}

if (bgmLink == "bgm9"){
if (bgm == "song9"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm9.prop("volume", 0);setTimeout(function(){
bgm9.trigger("play");
bgm9.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song9";}}

if (bgmLink == "bgm10"){
if (bgm == "song10"){} else {bgmAll.animate({volume: 0}, 1400);setTimeout(function(){bgmAll.trigger("pause")}, 1400);
bgm10.prop("volume", 0);setTimeout(function(){
bgm10.trigger("play");
bgm10.animate({volume: bgmVol}, 1400);}, 1400);
bgm = "song10";}}

})();
};