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

Posted 2023-02-25

【中文标题】如何从 Angular 6 中的 blob URL 下载音频文件？

【英文标题】：How to download audio file from blob URL in Angular 6?

【发布时间】：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。您遇到的具体问题是什么？

【参考方案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

如果这有效，请告诉我！