How to implement Audio Recording using Record RTC in Angular 2+?

What is Record RTC?

RecordRTC is a JavaScript-based media-recording library for modern web-browsers (supporting WebRTC getUserMedia API).

How to install RecordRTC?

npm install recordrtc — save

Steps to implement RecordRTC

1. Create AudioRecordingService

import { Injectable } from '@angular/core';

@Injectable()
export class AudioRecordingService {

  constructor() {
  }
}

2. Import Record RTC

import * as RecordRTC from 'recordrtc';

3. Define these variables in AudioRecordingService

private stream;
private recorder;
private interval;
private startTime;
private _recorded = new Subject<any>();
private _recordingTime = new Subject<string>();
private _recordingFailed = new Subject<string>();


getRecordedBlob(): Observable<RecordedAudioOutput> {
  return this._recorded.asObservable();
}

getRecordedTime(): Observable<string> {
  return this._recordingTime.asObservable();
}

recordingFailed(): Observable<string> {
  return this._recordingFailed.asObservable();
}

These are the observables that will be used to show recording time, get recorded blob and show error when recording fails.

4. Now start writing core functionality

startRecording() {

  if (this.recorder) {
    // It means recording is already started or it is already recording something
    return;
  }

  this._recordingTime.next('00:00');
  navigator.mediaDevices.getUserMedia({ audio: true }).then(s => {
    this.stream = s;
    this.record();
  }).catch(error => {
    this._recordingFailed.next();
  });

}

Call this function to start recording.

private record() {

  this.recorder = new RecordRTC.StereoAudioRecorder(this.stream, {
    type: 'audio',
    mimeType: 'audio/webm'
  });

  this.recorder.record();
  this.startTime = moment();
  this.interval = setInterval(
    () => {
      const currentTime = moment();
      const diffTime = moment.duration(currentTime.diff(this.startTime));
      const time = this.toString(diffTime.minutes()) + ':' + this.toString(diffTime.seconds());
      this._recordingTime.next(time);
    },
    1000
  );
}

This function initializes the recorder and starts the recording.

private toString(value) {
  let val = value;
  if (!value) {
    val = '00';
  }
  if (value < 10) {
    val = '0' + value;
  }
  return val;
}

This function is used to convert the number into two digits string to show the recording time.

stopRecording() {

  if (this.recorder) {
    this.recorder.stop((blob) => {
      if (this.startTime) {
        const mp3Name = encodeURIComponent('audio_' + new Date().getTime() + '.mp3');
        this.stopMedia();
        this._recorded.next({ blob: blob, title: mp3Name });
      }
    }, () => {
      this.stopMedia();
      this._recordingFailed.next();
    });
  }

}

Call this function to stop the recording. This function stops the recording and fires the getRecordedBlob() with the recorded blob.

private stopMedia() {
  if (this.recorder) {
    this.recorder = null;
    clearInterval(this.interval);
    this.startTime = null;
    if (this.stream) {
      this.stream.getAudioTracks().forEach(track => track.stop());
      this.stream = null;
    }
  }
}

This function is used to release the resources.

abortRecording() {
  this.stopMedia();
}

Call this function to abort the recording.

Now, you are ready to use AudioRecordingService in your component.

You can take help from this demo project:-https://github.com/moneychaudhary/RecordRTCDemo