CODEWITHSUNDEEP
typescriptaudioblobhtml5-audioangular6
Emanuela Colta
Emanuela Colta

Reputation: 2207

How to download audio file from blob URL in Angular 6?

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 is how the function of recording looks like: 

  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!

Upvotes: 2

Views: 10595

Answers (3)

gogog
gogog

Reputation: 420

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

Same like video

1.record audio in 'audio/webm' mimeType

2.download blob in webm format

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 reference to wav:https://github.com/ai/audio-recorder-polyfill and https://github.com/kaliatech/web-audio-recording-tests

e.x. in 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);
});

Upvotes: 5

DaniloStos
DaniloStos

Reputation: 1

try creating a new Audio referring to your source as it follows below:

var audioFile = new Audio(source)

and in your link.href and audio.src try setting it such as:

audio.src = audioFile
link.href = audioFile

Please let me know if this worked!

Upvotes: -1

Michiel
Michiel

Reputation: 23

If the blob is indeed a valid blob and the error is in your code to make the download available: I've had success with file-saver

Upvotes: 0

Related Questions