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

Question

我正在尝试在录制2500毫秒后生成音频文件(.mp3格式)。我使用的是navigator，主要使用的是HTML5-audio。我正在生成一个下载文件的链接。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);

      });
    };

任何帮助都将不胜感激。谢谢!

Answer 1

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

和视频一样

1.在‘音频/webm’mimeType中录制音频

2.下载webm格式的blob

3.将webm转换为mp3(或者你也可以在下载前使用javascript进行转换，但它很耗时，虽然在github.Maybe中很容易找到解决方案，但它将由原生api解决)

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

ios对wav的引用：https://github.com/ai/audio-recorder-polyfill和https://github.com/kaliatech/web-audio-recording-tests

e.x。使用chrome

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

Answer 2

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

Answer 3

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

var audioFile = new Audio(source)

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

audio.src = audioFile
link.href = audioFile

请让我知道这是否有效！