Angular 13 Recorder.js Project to Test Mic and Playback Audio Recording inside Browser Using TypeScript

app.component.html

<button (click)="startPlay()">start</button>
<button (click)="stopPlay()">play</button>

1 2	<button (click)="startPlay()">start</button> <button (click)="stopPlay()">play</button>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import Recorder from 'recorder-js';

declare var MediaRecorder: any;
const httpOptions = {
  headers: new HttpHeaders({
    'responseType' : 'blob as json',
    'Content-Type':  'application/json',
    'Accept': 'application/json'
  })
};
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit {
  blobFile;
  recordAudio;
  sendObj = {
    audio: this.blobFile
  };
  audioContext =  new (AudioContext)({sampleRate: 16000});
  recorder = new Recorder(this.audioContext, {});
  
  constructor(private http: HttpClient) {}
  ngOnInit() {
   this.recordAudio = () => {
      return new Promise(resolve => {
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            const mediaRecorder = new MediaRecorder(stream, {
              mimeType: 'audio/webm',
              numberOfAudioChannels: 1,
              audioBitsPerSecond : 16000,
            });
            const audioChunks = [];

            mediaRecorder.addEventListener("dataavailable", event => {
              audioChunks.push(event.data);
            });

            const start = () => {
              mediaRecorder.start();
            };

            const stop = () => {
              return new Promise(resolve => {
                mediaRecorder.addEventListener('stop', () => {
                  const audioBlob = new Blob(audioChunks, { 'type' : 'audio/wav; codecs=MS_PCM' });
                  const reader = new FileReader();
                  reader.readAsDataURL(audioBlob);
                  reader.addEventListener('load', () => {
                    const base64data =  reader.result;
                    this.sendObj.audio = base64data;
                    // this.http.post('apiUrl', this.sendObj, httpOptions).subscribe(data => console.log(data));
                  }, false);
                  const audioUrl = URL.createObjectURL(audioBlob);
                  console.log('Audiourl', audioUrl);
                  const audio = new Audio(audioUrl);
                  const play = () => {
                    audio.play();
                  };
                  resolve({ audioBlob, audioUrl, play });
                });

                mediaRecorder.stop();
              });
            };
            resolve({ start, stop });
          });
      });
    };
  }
  async startPlay() {
    this.recorder = await this.recordAudio();
    this.recorder.start();
  }

  async stopPlay() {
    const audio = await this.recorder.stop();
    audio.play();
  }

}

import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

import Recorder from 'recorder-js';

declare var MediaRecorder: any;

const httpOptions = {

headers: new HttpHeaders({

'responseType' : 'blob as json',

'Content-Type': 'application/json',

'Accept': 'application/json'

})

};

@Component({

selector: 'my-app',

templateUrl: './app.component.html',

styleUrls: [ './app.component.css' ]

})

export class AppComponent implements OnInit {

blobFile;

recordAudio;

sendObj = {

audio: this.blobFile

};

audioContext = new (AudioContext)({sampleRate: 16000});

recorder = new Recorder(this.audioContext, {});

constructor(private http: HttpClient) {}

ngOnInit() {

this.recordAudio = () => {

return new Promise(resolve => {

navigator.mediaDevices.getUserMedia({ audio: true })

.then(stream => {

const mediaRecorder = new MediaRecorder(stream, {

mimeType: 'audio/webm',

numberOfAudioChannels: 1,

audioBitsPerSecond : 16000,

});

const audioChunks = [];

mediaRecorder.addEventListener("dataavailable", event => {

audioChunks.push(event.data);

});

const start = () => {

mediaRecorder.start();

};

const stop = () => {

return new Promise(resolve => {

mediaRecorder.addEventListener('stop', () => {

const audioBlob = new Blob(audioChunks, { 'type' : 'audio/wav; codecs=MS_PCM' });

const reader = new FileReader();

reader.readAsDataURL(audioBlob);

reader.addEventListener('load', () => {

const base64data = reader.result;

this.sendObj.audio = base64data;

// this.http.post('apiUrl', this.sendObj, httpOptions).subscribe(data => console.log(data));

}, false);

const audioUrl = URL.createObjectURL(audioBlob);

console.log('Audiourl', audioUrl);

const audio = new Audio(audioUrl);

const play = () => {

audio.play();

};

resolve({ audioBlob, audioUrl, play });

});

mediaRecorder.stop();

});

};

resolve({ start, stop });

});

};

}

async startPlay() {

this.recorder = await this.recordAudio();

this.recorder.start();

}

async stopPlay() {

const audio = await this.recorder.stop();

audio.play();

}

Related posts:

You Might Also Like

Angular 13 ngx-flag-picker Example to Build International Country Dropdown Flag Picker in Browser Using TypeScript

Angular 13 Google Drive File Viewer Example to Display Multiple Image,PDF,PPTX,DOCX & HTML Files From URL Using ngx-doc-viewer Library in TypeScript inside Browser

Angular 9 jsPDF GST Billing Invoice Generator to Build PDF Documents Using jspdf-Autotable Library Deployed to Heroku in Browser Full Project For Beginners

Leave a Reply Cancel reply