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

angular 7 download file from url
angular 6 download image from url
angular download file on click
angular 6 download file from web api
convert blob to audio javascript
download file with blob url
download pdf in angular 7
angular save file

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!

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

angular-blob-file-download, Starter project for Angular apps that exports to the Angular CLI. this.sanitizer.​bypassSecurityTrustResou. rceUrl(window.URL.createObjectURL(blob). );. In this tutorial, we are going to learn how to download file in angular 6 using ASP NET Core web API. This is pretty simple to download any kind of file, like .pdf, .png, .jpg, .doc, .txt, .csv, gif, and xls, from server using Angular 6 and ASP.NET Core web API.

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

Angular 5 HttpClient File Download with Authentication, Angular 5 HttpInterceptor – Add Bearer Token to HttpClient Requests First of all we need to download the file as a blob object. 6. public async downloadResource(id: string): Promise<Blob> { In order to open a save file dialog you have to create an object URL with the blob you get from the service  In the tutorial, we show how to upload files, download files from Angular 6 Client to MySQL with Node.js RestAPIs server using Multer middleware and Sequelize ORM. Related posts: – Node.js/Express RestAPIs server – Angular 6 Upload/Download Files – Multer + Bootstrap – Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL – Get/Post/Put/Delete … Continue reading "Angular 6

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!

How to play an audio file using Blob in Angular app : angular, How can I use this data to play the audio within my Angular application? createObjectURL(file) Is it OK to study Angular from a book that uses Angular 6 ? https://medium.com/@cdeniz/getting-started-working-with-ngrx-and-firebase-​  I want download an excel from my angular controller using blob. the server code of the mvc application is [HttpGet] public HttpResponseMessage Download(SearchModel search){ string fileName = &#8220…

Angular File Download with Progress, With URL.createObjectURL we can generate a download link to the blob. Finally, we click() the link like the user would've done with a regular  This post is about how to download file from server using Angular framework. Angular is a UI framework for building rapid application development. Here we will use Angular 7/8 to download file from server side.

How to download excel file in Angular 7, Sometimes, we want to download files from server, but when search about Blobs are typically images, audio, or other multimedia objects, though sometimes Http module this.http.get(url) // extract the data in http response  So you really have to put in this hack and do a “as ‘json'” in order for this to work.. Triggering a file download. In order to open a save file dialog you have to create an object URL with the blob you get from the service above and then “open” that URL.

Blob JavaScript API, Use FileReader to read data from a Blob or File. Blobs allow you to construct file like objects on the client that you can pass to apis that expect urls instead of  Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Comments
  • It appears that you've done it already. Just don't assume that the file is going to be an MP3. What's the specific issue you're having?