Load multiple audio files one with jquery and have a callback on complete

Question

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');  
    } 
});

Here is the markup

<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?

Thanks.

How is requirement at present Question different from Answer at linked Question? Use `Promise.all()`, `Promise` constructor to load all media resources, when all resources loaded, use chained `.then()` to perform tasks. — guest271314, Feb 06 '17 at 09:38
Am not sure if the code provided in the answer is working on mobile devices. Also i don't need to play them after each other just load @guest271314. And have a callback when all audios will be loaded fully not on each one — Anahit Ghazaryan, Feb 06 '17 at 09:42
The `javascript` at linked Question should return same result at mobile devices. `.then()` chained to `Promise.all()` will not be called until all `Audio` elements `canplay` event has been dispatched. You can omit calling `.play()`. — guest271314, Feb 06 '17 at 09:45
How the urls in the audio files array can be dynamic cause imagine file names can be changed at any time @guest271314. Am testing currently the promise par — Anahit Ghazaryan, Feb 06 '17 at 09:50
_"How the urls in the audio files array can be dynamic cause imagine file names can be changed at any time"_ Not sure what you mean by "dynamic"? Why would file names be changed? — guest271314, Feb 06 '17 at 09:53
It is for being safe. Regarding the promise on ios it is not working i just tested, Android works, i added an alert in then and it is not doing anything @guest271314 — Anahit Ghazaryan, Feb 06 '17 at 10:03
Yes jquery is included @guest271314.My main issue is with ios that's why i was trying to do them via jquery load — Anahit Ghazaryan, Feb 06 '17 at 10:08
Try chaining `.catch(function(e) {console.log(e)})` to `Promise.all()` call to determine if an error occurs. What is expected result of using jQuery `.load()`? You have not passed any parameters to the `.load()` function call. — guest271314, Feb 06 '17 at 10:09
I added the catch but it is not showing anything. Load just loaded the audio file and it was working on ios @guest271314 — Anahit Ghazaryan, Feb 06 '17 at 10:17
Can you create a jsfiddle http://jsfiddle.net or plnkr http://plnkr.co to demonstrate issue? Does `$.get()` return same result as `.load()` ? If yes, you can use `$.when()`, `$.get()` to load files. Though `Promise.all()` should also return same result. — guest271314, Feb 06 '17 at 10:22
Here it is https://jsfiddle.net/anahitdev/hv7xwabg/ @guest271314 — Anahit Ghazaryan, Feb 06 '17 at 10:32
I also tried with get and when and result is not the same. So how you see my question is not duplicate and the issue exists @guest271314 — Anahit Ghazaryan, Feb 06 '17 at 11:01
When you click on On you see the alert with IOS @guest271314? — Anahit Ghazaryan, Feb 06 '17 at 16:24
Have not tried ios. Are sounds not audible at https://jsfiddle.net/hv7xwabg/1/? — guest271314, Feb 06 '17 at 16:53
As i told my issue is with IOS, other than that i don't have issues. If you try on ios you will not see the alert @guest271314 — Anahit Ghazaryan, Feb 06 '17 at 17:04
Which version of ios are you using? See http://caniuse.com/promises, https://github.com/taylorhakes/promise-polyfill — guest271314, Feb 06 '17 at 17:09
I need it working on all so it does not make sense. Need cross platform solution @guest271314. — Anahit Ghazaryan, Feb 08 '17 at 07:44

score 0 · Answer 1 · answered Feb 08 '17 at 17:48

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?

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>

Load multiple audio files one with jquery and have a callback on complete

1 Answers1

Linked