如何在播放前完全加载音频？答案

【问题标题】：How to load audio completely before playing?如何在播放前完全加载音频？
【发布时间】：2015-11-17 11:15:24
【问题描述】：

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

超文本标记语言：

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

或者还有其他符合我要求的玩家吗？

【问题讨论】：

你尝试过使用onload事件吗？我从未在HTML5 中使用过音频，但我会使用并且我制作了一个函数来加载一个包含迄今为止我没有测试过的游戏音乐的数组。
试试onloadeddata()
已经尝试过onloadeddata onloadedmetadata。首先它必须加载完整的音频并自动播放
仅供参考，大多数移动设备不允许在没有任何用户交互的情况下播放音频文件
它不适用于移动设备。我需要在电脑上使用它

标签： javascript php jquery html audio

【解决方案1】：

尝试使用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();

【讨论】：

这是一个很好的方法。您还可以使用上面的状态500 来检测响应是否超时或是否出错。 this.status>=500.

【解决方案2】：

我使用@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
);

【讨论】：