如何从 Angular 6 中的 blob URL 下载音频文件？答案

【问题标题】：How to download audio file from blob URL in Angular 6?如何从 Angular 6 中的 blob URL 下载音频文件？
【发布时间】：2018-07-20 14:19:48
【问题描述】：

我试图在录制 2500 毫秒后生成一个音频文件（.mp3 格式）。我正在使用navigator，主要使用 HTML5 音频。我正在生成一个下载文件的链接。 window.URL.createObjectURL(stream) 返回blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39。我不知道如何把它变成一个可以下载的文件。

录音功能是这样的：

  this.record = () => {     
      var headers = new Headers();
      var browser = <any>navigator;      
      var obj = {
        audio: true,
        sampleSize: 16
      };

      var audio = document.createElement('audio');      

      browser.getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
      browser.mediaDevices.getUserMedia(obj).then(stream => {            
        setTimeout(function(){        
          var track = stream.getTracks()[0]; 
          var source = window.URL.createObjectURL(stream);   // returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39
          audio.src = source;      
          audio.autoplay= true; 
          var link = document.createElement("a");
          link.href = source;
          link.download = 'audio_recording_' + new Date().getTime() + '.mp3'; //"audioSample.wav";
          link.innerHTML = "Click here to download the file";
          document.body.appendChild(link); 

          track.stop(); 
          // window.URL.revokeObjectURL(stream);    
        }, 2500);

      });
    };

任何帮助将不胜感激。谢谢！

【问题讨论】：

看来您已经完成了。只是不要假设该文件将是 MP3。您遇到的具体问题是什么？

标签： typescript audio blob html5-audio angular6

【解决方案1】：

音频和视频在chrome中的webm格式相同。

和视频一样

1.以'audio/webm'mimeType录制音频

2.下载webm格式的blob

3.convert webm to mp3（或者你也可以在下载之前使用javascript转换，但是虽然在github上很容易找到解决方案，但它确实需要时间。也许它会被native api sloved）

参考：https://github.com/webrtc/samples

ios 参考 wav:https://github.com/ai/audio-recorder-polyfill 和 https://github.com/kaliatech/web-audio-recording-tests

例如在铬

  function startRecording() {
  recordedBlobs = [];
  let options = {mimeType: 'audio/webm'};

  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }

  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = 'Stop Recording';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {
    console.log('Recorder stopped: ', event);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start(10); // collect 10ms of data
  console.log('MediaRecorder started', mediaRecorder);
}

const downloadButton = document.querySelector('button#download');
downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type : 'audio/webm'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
});

【讨论】：

【解决方案2】：

如果 blob 确实是有效的 blob，并且您的代码中存在错误以使下载可用：我已经成功使用 file-saver

【讨论】：

【解决方案3】：

尝试创建一个引用您的来源的新音频，如下所示：

var audioFile = new Audio(source)

并在您的 link.href 和 audio.src 中尝试将其设置为：

audio.src = audioFile
link.href = audioFile

如果这有效，请告诉我！

【讨论】：