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

Posted 2023-02-25

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

【英文标题】：Load multiple audio files one with jquery and have a callback on complete

【发布时间】：2017-02-06 09:17:50

【问题描述】：

我在一个页面中使用了许多声音，我决定在点击声音图标时加载它们，这样它就可以在移动/触摸设备上运行。见下方代码

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>

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

谢谢。

【问题讨论】：

不是重复的，我的情况不同@guest271314

当前问题的要求与链接问题的答案有何不同？使用Promise.all()、Promise构造函数加载所有媒体资源，加载完所有资源后，使用链式.then()执行任务。

不确定答案中提供的代码是否适用于移动设备。我也不需要一个接一个地播放它们，只需加载@guest271314。并在所有音频都完全加载而不是每个音频时进行回调

链接问题的javascript 应该在移动设备上返回相同的结果。直到所有 Audio 元素 canplay 事件都被调度后，链接到 Promise.all() 的 .then() 才会被调用。您可以省略调用.play()。

我需要它来处理所有问题，所以它没有意义。需要跨平台解决方案@guest271314。

【参考方案1】：

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

一种方法是使用Audio 构造函数或document.createElement("audio") 创建AudioNode 和jQuery.holdReady()。创建一个数组来存储音频节点，将canplay事件附加到AudioNode。在canplay 事件中检查包含音频节点的数组是否等于包含媒体源的数组，如果为真则调用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>