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

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

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>

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

谢谢

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

一种方法是使用

Audio

构造函数或

document.createElement（“Audio”）

创建

AudioNode

和

jQuery.holdReady（）

。创建一个数组来存储音频节点，将

canplay

事件附加到

AudioNode

。在

canplay

事件检查包含音频节点的数组是否等于包含媒体源的数组，如果为true，则调用jQuery.holdReady（false）。然后可以使用

Array.prototype.slice（）

创建音频节点的副本，

Array.prototype.shift（）

按顺序播放音频节点

jQuery.holdReady（true）；
常量音频地址=[
"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"
];
常数轨道=[]；
forEach（函数（src）{
var audio=document.createElement（“音频”）；
audio.oncanplay=函数（）{
轨道。推（这个）；
if（tracks.length==audioAddress.length）{
jQuery.holdReady（false）；
}
}
audio.src=src；
});
$（函数（）{
让mix=tracks.slice（0）；
函数playTracks（）{
让track=mix.shift（）；
track.onended=函数（）{
if（混合料长度）{
playTracks（）；
}
}
track.play（）；
}
playTracks（）；
});

这不是重复的，我的案例不同@guest271314目前的要求与链接问题的答案有什么不同？使用
Promise.all（）
，
Promise
构造函数加载所有媒体资源，加载所有资源后，使用chained
。然后（）
执行任务。我不确定答案中提供的代码是否在移动设备上工作。此外，我不需要在彼此之后播放它们，只需加载@guest271314即可。并在所有音频都将被完全加载时进行回调，而不是在每个音频上。
javascript
at链接问题应在移动设备上返回相同的结果
.then（）
链接到
Promise.all（）
将不会被调用，直到所有
Audio
元素
canplay
事件被调度。您可以省略调用
.play（）
。我需要它处理所有问题，这样它就没有意义了。需要跨平台解决方案@guest271314。