mediaSource的使用核心讲解

背景：CBM音频合成插件返回的音频是base64数据流，文件每次最大返回40k。前端拿到音频需要自己拼接，组合到一起才能播放。

 

问题现象：当把base64拼接后赋值给audio的src后，音频无法播放。或者只能播放初次赋值的结果，后续拼接的则未能播放

 

处理方案：使用MediaSource实现流式播放，MediaSource介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaSource。

MediaSource总结：它是一个构造函数返回一个mediaSource对象，对象内保存着媒体资源，可供媒体标签的src使用，资源通过mediaSource的sourceBuffer.appendBuffer(buf);添加。

核心代码：

//创建mediaSource 实例对象
const mediaSource = new MediaSource();//
//把媒体标签的src指向实例对象，URL.createObjectURL生成url
video.src = URL.createObjectURL(mediaSource);//
//sourceOpen是MediaSource接口的一个事件，当媒体源成功打开时触发，在触发后的回调函数中执行资源添加
mediaSource.addEventListener("sourceopen", sourceOpen);//
//根据媒体资源类型创建sourceBuffer 存储空间，mimeCodec是媒体类型
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
//通过fetch拿到响应资源
fetchAB(assetURL, function (buf) {
　　sourceBuffer.addEventListener("updateend", function (_) {
　　//监听资源添加成功后执行的逻辑
    mediaSource.endOfStream();
    video.play();
      //console.log(mediaSource.readyState); // ended
　　});
　　//向mediaSource对象中添加资源。注意：sourceBuffer添加是个异步事件，当一个资源没有添加完成之前，继续添加会报错，既需要在updateend后添加
    sourceBuffer.appendBuffer(buf);
});
function fetchAB(url, cb) {
  console.log(url);
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.responseType = "arraybuffer";
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
}