How to fully download sound before playing?

Question

I need to fully download the audio before playing. The player should play audio automatically after full download. There should not be a pause button / user cannot pause it. Here is my code, but it cannot do it.

Hypertext Markup Language:

<audio class="audio-player" onloadeddata="myOnLoadedData()" onprogress="myOnProgress()" src="<?php echo $audio_link;?>" controls> 

JavaScript:

 function myOnLoadedData() { console.log('Loaded data'); $('audio.audio-player').attr('autoplay','autoplay'); } function myOnProgress(){ console.log('downloading'); } 

Or is there another player that meets my requirements?

Answer 1

Try using XMLHttpRequest to return a Blob audio file, new Audio() , .load() , .play()

 var request = new XMLHttpRequest(); request.open("GET", "/path/to/audio/file/", true); request.responseType = "blob"; request.onload = function() { if (this.status == 200) { var audio = new Audio(URL.createObjectURL(this.response)); audio.load(); audio.play(); } } request.send(); 

Answer 2

I used the @ guest271314 method to create a funtion that loads every music link / url that are in the object.

 function LoadSounds(obj,ch,ca){ (function(r){ var i, lo=0, // number of sounds loaded len=0, // number of sounds to load con={}; // an object with the sounds loaded for(i in obj){ len++ // increase the number of sounds to load } for(i in obj){ (function(i){ r=0; r=new XMLHttpRequest(); r.open("GET",obj[i],true); r.responseType="blob"; r.onload=function(){ if(this.status==200){ lo++ con[i]=new Audio(URL.createObjectURL(this.response)); con[i].load(); ch(obj[i]); if(lo==len)ca(con) r=undefined; } } r.send(); })(i); } i=undefined; })(0); 

}

Compressed...

 function LoadSounds(n,o,e){!function(t){var i,s=0,d=0,u={};for(i in n)d++;for(i in n)!function(i){t=0,t=new XMLHttpRequest,t.open("GET",n[i],!0),t.responseType="blob",t.onload=function(){200==this.status&&(s++,u[i]=new Audio(URL.createObjectURL(this.response)),u[i].load(),o(n[i]),s==d&&e(u),t=void 0)},t.send()}(i);i=void 0}(0)} 

Using an example ...!

 // Note that these musics in my example aren't in a valid link var MyMusics={ Music1:'http://example.com/music.ogg', BestEver:'http://example.com/bestever.ogg' }; LOAD_SOUNDS( MyMusics, // Musics object function(){alert("+1 loaded");}, // function when a link music is loaded function(){e.BestEver.play();} // function when all musics from links were loaded );