1.为什么要使用MediaSource搭建流式音频播放器呢,主要就是想进行边播放边加载,就能实现无等待加载播放,更好的提高用户对播放器的使用体验。很好,有了这个思路之后,就开始我们的代码之路。
2.简单的代码。
this._nativeAudio = new window.Audio()
this._mediaSource = new MediaSource()
this._nativeAudio.src = URL.createObjectURL(this._mediaSource)
this._mediaSource.onsourceopen = this._onSourceOpen // 调用此方法来传入buff
this._nativeAudio.addEventListener('timeupdate', function () {
// 歌曲播放时间变化事件
})
this._nativeAudio.addEventListener('ended', function () {
// 播放结束的事件
}, false)
// MediaSource打开是触发
_onSourceOpen = () => {
const self = this
self._sourceBuffer = self._mediaSource.addSourceBuffer(self._mime)
self._sourceBuffer.onupdateend = self._onUpdateEnd
self._appendBuffer()
}
// SourceBuffer更新完成触发
_onUpdateEnd = () => {
this._appendBuffer()
}
_appendBuffer = async () => {
this._sourceBuffer.appendBuffer(buffer) //添加buff
}
逻辑就是,在MediaSource打开是触发_onSourceOpen去添加buff用到的方法是_appendBuffer(),然后每次添加完一次buff之后会触发_onUpdateEnd方法,在_onUpdateEnd触发的时候又去调用_appendBuffer()方法,直到最后一次_onUpdateEnd后不再添加buff,此处的判断我也没有写出来,需自行添加。
MediaSource搭建流式音频播放器的操作就是如此,希望对大家有用。