使用 jquery 加载多个音频文件，并在完成时进行回调

Question

我在页面中使用了许多声音，我决定在声音图标单击上加载它们，以便它可以在移动/触摸设备上工作。请参阅下面的代码

var greenBetsound = document.getElementById('greenBet_sound');
jQuery('.soundIcon').click(function(){  
    if(!jQuery('.soundIcon').hasClass('soundIconOn')){
        jQuery('body').addClass('audioOn');
        jQuery('.soundIcon').removeClass('soundIconOff').addClass('soundIconOn');
        greenBetsound.load();
        firstReelStopsound.load();
        secondReelStopsound.load();
        thirdReelStopsound.load();
        fourthReelStopsound.load();
        fifthReelStopsound.load();
        creditsTranferWithNoClubMeter.load();
        bonusGamesStart.load();
        jackpotSound.load();
        winline1Combsound.load();
        winline2Combsound.load();
        winline3Combsound.load();
        winline4Combsound.load();
        winline5Combsound.load();
        winline6Combsound.load();
        mysterycountsound.load();
    }else{
        jQuery('body').removeClass('audioOn');
        jQuery('.soundIcon').removeClass('soundIconOn').addClass('soundIconOff');  
    } 
});

这是标记

<audio id="greenBet_sound" src="sounds/sound21.mp3" preload="auto"></audio>

我

怎样才能将它们一次加载到一行中并在加载完成后进行回调，以便我允许用户仅在声音完全加载后导航到网页？

谢谢。

Answer 1

我怎样才能将它们一次加载到一行中并进行回调 加载完成后，我允许用户导航到网页 只有在声音完全加载之后？

一种方法是使用Audio构造函数或document.createElement("audio")来创建AudioNode和jQuery.holdReady()。创建一个数组来存储音频节点，canplay事件附加到AudioNode。在事件canplay检查包含音频节点的数组是否等于包含媒体源的数组，如果为 true，则调用jQuery.holdReady(false) 。然后，您可以使用Array.prototype.slice()创建音频节点的副本，Array.prototype.shift()按顺序播放音频节点。

jQuery.holdReady(true);
const audioAddress = [
  "http://grandspinfinal.ipoint.com.mt/sounds/sound21.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/toBasic.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop1.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop2.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop3.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop4.mp3",
  "http://grandspinfinal.ipoint.com.mt/sounds/wheelStop5.mp3"
];
const tracks = [];
audioAddress.forEach(function(src) {
  var audio = document.createElement("audio");
  audio.oncanplay = function() {
    tracks.push(this);
    if (tracks.length === audioAddress.length) {
      jQuery.holdReady(false);
    }
  }
  audio.src = src;
});
$(function() {
  let mix = tracks.slice(0);
  function playTracks() {
    let track = mix.shift();
    track.onended = function() {
      if (mix.length) {
        playTracks();
      }
    }
    track.play();
  }
  playTracks();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>