最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】js中保存MediaRecorder录音的blob数据到文件中并下载

JS crifan 5815浏览 0评论

折腾:

【已解决】web端html+js中如何调用麦克风获取用户语音输入说话

期间,已经可以获取MediaRecorder的录音数据,并可以用audio去播放。

现在需要把MediaRecorder录音得到的,说是blob数据,保存下载,并可以下载

MediaRecorder save file

js MediaRecorder save file

Record Audio and Video with MediaRecorder  |  Web  |  Google Developers

Record to an Audio File using HTML5 and JS

【总结】

然后用代码:

<code>      mediaRecorder.addEventListener('stop', function() {
          console.log("mediaRecorder stoped");
          
          console.log("recordedBlobChunks=%o", recordedBlobChunks);

          const recordedBlob = new Blob(recordedBlobChunks);
          console.log("recordedBlob=%o", recordedBlob);
          const blobUrl = URL.createObjectURL(recordedBlob);
          console.log("blobUrl=%o", blobUrl);

          playRecordedAudio(blobUrl);

          downloadRecordedAudio(blobUrl);
      });

  function downloadRecordedAudio(blobUrl){
      console.log("downloadRecordedAudio: blobUrl=%s", blobUrl);

      $("#downloadSpeakAudio").attr("href", blobUrl);

      var curDate = new Date();
      console.log("curDate=%o", curDate);
      var curDatetimeStr = curDate.Format("yyyyMMdd_HHmmss");
      console.log("curDatetimeStr=%o", curDatetimeStr);
      var recordedAudioFilename = curDatetimeStr + ".webm";
      console.log("recordedAudioFilename=%o", recordedAudioFilename);
      $("#downloadSpeakAudio").attr("download", recordedAudioFilename);
  }

</code>

即可点击并下载:

保存文件为对应的格式,且可以点击播放:

转载请注明:在路上 » 【已解决】js中保存MediaRecorder录音的blob数据到文件中并下载

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 请问你用MediaRecorder录制的音视频时间戳是否正常,我目前保存的文件都无法拖动,也不知道总时长
    高先生4年前 (2020-09-01)回复
85 queries in 0.183 seconds, using 22.07MB memory