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

问题描述

我在页面中使用了许多声音，因此我决定将它们加载到声音图标上，以使其可在移动/触摸设备上使用.参见下面的代码

I have many sounds used in a page and i decided to load them on a sound icon click so it will work on mobile/touch devices. See below the code

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>

我如何一次全部加载它们，并在加载完成时进行回调，这样我才允许用户在声音完全加载后才导航到网页?

How can I have them all loaded at once in one line and have a callback on complete of loading so i allow users to navigate into the webpage only after the sounds will be fully loaded?

谢谢.

推荐答案

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

One approach is to use Audio constructor or document.createElement("audio") to create AudioNode and jQuery.holdReady(). Create an array to store audio nodes, attach canplay event to AudioNode. At canplay event check if array containing audio nodes is equal to array containing media sources, if true call jQuery.holdReady(false). You can then use Array.prototype.slice() to create a copy of audio nodes, Array.prototype.shift() to play back audio nodes in sequence.

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>

这篇关于用jquery加载多个音频文件，并在完成时进行回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！