如何在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.将webm转换为mp3(或者您也可以在下载前使用javascript进行转换，但是这很耗费时间，尽管很容易在github中找到解决方案.也许它会被本机api吸引)

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

e.x.镀铬

  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屋！