如何从 Angular 6 中的 blob URL 下载音频文件? [英] How to download audio file from blob URL in Angular 6?

问题描述

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

I am trying to produce an audio file (.mp3 format) after recording for 2500 milliseconds. I am using navigator and mainly make use of HTML5-audio. I am generating a link for downloading the file. window.URL.createObjectURL(stream) returns blob:http://localhost:4200/e6a5a51e-ae11-4b77-9b2c-06251b13ca39. I don't know how to turn this into a file to be able to download.

录音功能是这样的:

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

      });
    };

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

Any help would be much appreciated. Thank you!

推荐答案

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

audio and video are in the same format webm in chrome.

同视频

1.在'audio/webm' mimeType 中录制音频

1.record audio in 'audio/webm' mimeType

2.下载webm格式的blob

2.download blob in webm format

3.convert webm to mp3(或者你也可以在下载前使用javascript进行转换，虽然在github中很容易找到解决方案，但它确实花费时间.也许它会被原生apisloved)

3.convert webm to mp3(or you can also convert using javascript before download,but it real cost time though it's easy to find solution in github.Maybe it will be sloved by native api)

ref:https://github.com/webrtc/samples

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

ios reference to wav:https://github.com/ai/audio-recorder-polyfill and 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);
});

这篇关于如何从 Angular 6 中的 blob URL 下载音频文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！