Question

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

例如，输出：

blob1 blob2 blob3 blob4 blob5 blob6 blob7 blob8 blob9

...

我只能听到blob1，其他blob是＆＃34;禁用＆＃34;。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我不确定您尝试突出显示的问题是什么，但是：

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));

MediaRecorder ondataavailable成功运行一次

1 个答案: