8

MediaRecorder ondataavailable 工作成功一次。我需要获取 blob，获取 base64，发送到我的服务器，将此 base64 解码为音频 blob。这很奇怪。

例如，输出：

blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9

……

我只能听到 blob1，其他 blob 被“禁用”。

试试看！此代码记录音频：

window.startRecord = function(cb){
  var int;
  navigator.mediaDevices.getUserMedia({ audio: true , video:false}).then(function(stream){
    var options = {
      audioBitsPerSecond : 128000,
      videoBitsPerSecond : 2500000,
      mimeType : 'audio/webm\;codecs=opus'
    }

    if(!MediaRecorder.isTypeSupported(options['mimeType'])) options['mimeType'] =  "audio/ogg; codecs=opus";


    window.voice = new MediaRecorder(stream, options);

    voice.start(500);
    voice.ondataavailable = function(data){


      var reader = new FileReader();
      var blob = data.data;

      reader.readAsDataURL(blob);
      reader.onloadend = function () {
        var result = reader.result;

        cb(result);
      }
    };

    voice.onstop = function(){
      console.log('stop audio call');
    }
  });
}

window.convertDataURIToBinary = function(dataURI) {
  var BASE64_MARKER = ';base64,';
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}
<body>
<button onclick="startRecord(function(r){
 
    var binary= convertDataURIToBinary(r);
  var blob=new window.Blob([binary], {type : 'audio/webm'});
  var blobUrl = window.URL.createObjectURL(blob);
  console.log('URL : ' + blobUrl);

  document.getElementById('data').append(blobUrl + `

 | 

    `);
   })">Exec</button>

   <div id="data">
     
   </div>
<body>

</body>

4

1 回答 1

7

我不确定您要强调的问题是什么，但是：

dataavailable事件的属性data仅包含已记录的全部数据的一部分。
例如，只有第一个块将包含最终记录媒体所需的元数据。

然后预计您将在导出它们时将所有这些块合并在一起。

这应该只做一次，在MediaRecorder.stop活动中。

const chunks = []; // store all the chunks in an array
recorder.ondataavailable = e => chunks.push(e.data);
// merge the chunks in a single Blob here
recoder.onstop = e => export_media(new Blob(chunks));
于 2018-02-08T05:28:54.307 回答