javascript - 不要在 Android 上加载时间流音频

Question

我想在来自电台的网络音频流上播放它。按 loadstart 事件消息播放会出现 LOADING，但在开始播放音频流之前(大约提前 4 或 5 秒)被删除。我希望该事件能够控制流文件加载的时间。

台式电脑不存在此问题，因为音频会立即加载，但在智能手机的 Chrome 浏览器和 S.O. Android这个问题非常明显，加载时间大约需要6、7秒。所以我会通过一些事件来控制这个时间。

什么样的事件可用于在音频未开始播放之前加载消息不会被删除？谢谢。

 function AudioStart(){
    audio = new Audio();
  audio.src = "http://listen.XXXX.com/XXXX";

    audio.addEventListener("loadstart", function(){

document.getElementById('title').innerHTML="<span>LOADING...</span>";

;
},false);


audio.addEventListener("loadeddata", function(){

audio.play();

},false);



} 

Answer 1

Listen oncanplay instead of loadeddata or oncanplaythrough if you ant to make sure entire audio is loaded.

当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。

当浏览器可以开始播放指定的音频/视频时(当它有足够的缓冲来开始时)，canplay 事件发生

当浏览器估计它可以播放指定的音频/视频而无需停止缓冲时，就会发生 canplaythrough 事件。

试试这个:

function AudioStart() {
  audio = new Audio();
  audio.src = "http://www.w3schools.com/html/horse.mp3";

  audio.addEventListener("loadstart", function() {
    document.getElementById('title').innerHTML = "<span>LOADING...</span>";
  }, false);

  audio.addEventListener("canplay", function() { //OR 'oncanplaythrough'
    document.getElementById('title').innerHTML = "";
    audio.play();
  }, false);
}

<h3 id='title'></h3>
<button onclick='AudioStart()'>Start Audio</button>

Fiddle here