如何在播放之前完全加载音频?

时间:2015-11-17 11:15:25

标签: javascript php jquery html5 audio

播放前我必须完全加载音频。播放器完全加载后应自动播放音频。不应该有暂停按钮/用户无法暂停它。这是我的代码,但无法这样做。

超文本标记语言:

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

还是有其他玩家符合我的要求吗?

2 个答案:

答案 0 :(得分:2)

尝试使用XMLHttpRequest返回Blob音频文件,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();

答案 1 :(得分:0)

我使用@ guest271314的方法来执行加载对象中每个音乐链接/ URL的功能。

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

}

压缩...!

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

使用示例......!

// 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
);