CODEWITHSUNDEEP
javascriptphpjqueryhtmlaudio
Niroj Adhikary
Niroj Adhikary

Reputation: 1835

How to load audio completely before playing?

I have to load audio completely before playing it. Player should play audio automatically after loading it completely. There should not be pause button/user can not pause it. Here's my code, but unable to do so.

Hyper Text 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 any other player that meets my requirement?

Upvotes: 5

Views: 6533

Answers (2)

user5580610
user5580610

Reputation:

I used the method of @guest271314 to do a funtion that load every music link/URL that are in an 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 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
);

Upvotes: 0

guest271314
guest271314

Reputation: 1

Try using XMLHttpRequest to return Blob of 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();

Upvotes: 7

Related Questions