javascript - HTML5 音频正在缓冲?

标签 javascript html audio

有什么方法可以判断歌曲正在缓冲吗?

当我点击播放并且歌曲开始播放时,事件第一次触发,我得到了事件,但是一旦歌曲播放,如果数据进来的速度不够快,它就会“暂停”,但没有事件触发。

我试过:

audioElement.addEventListener('suspend',function (){
    console.log('suspended'); //Fires the first time song is being "buffered"
});

audioElement.addEventListener('playing',function (){
    console.log('playing'); //Fires the first time the song is played.
});

我如何检查数据是否正在缓冲,以便我可以向用户指示要等待的一些指示?

最佳答案

这取决于您的目标浏览器及其对当前 W3C 工作草案 HTML5 规范媒体元素部分的实现。

您始终可以在此处检查您的目标浏览器是否支持某些事件:http://www.w3.org/2010/05/video/mediaevents.html

否则,如果数据没有通过,那么我相信音频不会缓冲并且 stalled 事件将会触发。

如果数据正在通过,那么您应该能够检查 suspendprogress 事件,这两个事件都应该在数据被缓冲时触发(但不一定暂停/播放)。

如果因为浏览器不支持而没有触发这些事件,您始终可以使用计时器检查音频元素的 networkState 属性,它实际上会告诉您音频是否正在缓冲或不是:

HTML:

<!DOCTYPE html>
<html>
    <body>
        <audio controls="controls" id="myAudio">
            <source src="http://www.w3schools.com/html5/horse.ogg" type="audio/ogg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

Javascript:

var audioElement = document.getElementById('myAudio');

var checkNetworkStateTimer = setInterval(function () {
    console.log(audioElement.networkState); //2 indicates NETWORK_LOADING state
}, 250);

同样在 jsFiddle 上:http://jsfiddle.net/3sdhj/2/

您可能无法重现 2networkState,因为音频在 jsFiddle 上的样本太短,但您明白了。

如果仍然失败,我会选择流行的 HTML5 音频库,例如 SoundJSBuzzsoundmanager2(我不喜欢与这些图书馆的关联方式)。

关于javascript - HTML5 音频正在缓冲?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12712178/

相关文章:

html - 如何并排获得两个输入,其余输入在不同的行上?

javascript - 试图让复选框在选中时改变颜色

高速 Java 节拍器

php - 使用bootstrap 3音频播放器,但显示正常的html5输出

javascript - 从 Web 组件获取数据,该数据包含在另一个 Web 组件中。 polymer

javascript - Ruby on Rails : Create Database Entry without JavaScript

html - Facebook 不使用图片链接?

ios - 使用 iPhone 音频加密狗传输数据

javascript - Angular Test 不调用 Promise 回调

javascript - slider 无法关闭