Record Audio in Angular2

Question

How to record audio and playback in Angular2. I see https://logbon72.github.io/angular-recorder/ but it is for AngularJS. Please help me

Answer 1

Now i am going to implement JRecorder plugin for audio recording in Angular 2. First download that plugin from that url https://github.com/mattdiamond/Recorderjs. Now what thing is to do?

1: First Create one file recorderFunctions.js file in your angular2/src/assets/js folder and copy code inside that file, the code are:

function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
  }

  var audio_context;
  var recorder;

  function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');

    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');
    
    recorder = new Recorder(input);
    __log(recorder);
    __log('Recorder initialised.');
  }

  function startRecording(button) {
    recorder && recorder.record();
    __log('Recording...');
  }

  function stopRecording(button) {
    recorder && recorder.stop();
    __log('Stopped recording.');
    
    // create WAV download link using audio data blob
    createDownloadLink();
    
    recorder.clear();
  }

  function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      
      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      recordingslist.appendChild(li);
    });
  }


 var recorderObject = (function() {
  return {
     recorder: function() {
        (function($) {
            'use strict';
  window.onload = function init() {
    try {
      // webkit shim
      window.AudioContext = window.AudioContext || window.webkitAudioContext;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
      window.URL = window.URL || window.webkitURL;
      
      audio_context = new AudioContext;
      __log('Audio context set up.');
      __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
      alert('No web audio support in this browser!');
    }
    
    navigator.getUserMedia({audio: true}, startUserMedia, function(e) {
      __log('No live audio input: ' + e);
    });
  };
})(window.jQuery);
}
}
})(recorderObject||{})

2: Now also copy file recorder.js from dist folder of mattdiamond/Recorderjs and paste that file also in your angular 2 src/assets/js folder. Dont forget to give references of these two file in your angular 2 index.html file.

3: Now open your terminal and create component using angular-cli by entering

ng g c audio-files

4: In your audio-files.component.html file,paste that code here:

  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper ">
    <!-- START PAGE CONTENT -->
	<div class="content ">

      <div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
        <div class="inner">
          <!-- START BREADCRUMB -->
           <ul class="breadcrumb">
            <li>
              <i class="{{ dashboardIcon }}" aria-hidden="true"></i> <a routerLink="">Dashboard</a>
            </li>
            <li>
              <i class="{{ audioIcon }}" aria-hidden="true"></i> <a style="cursor:pointer;" class="active">{{ breadcrum }}</a>
            </li>
          </ul>
          <!-- END BREADCRUMB -->
        </div>
      </div>
 
      <!-- START CONTAINER FLUID -->
      <div class="container-fluid container-fixed-lg bg-white">
        <!-- START PANEL -->
        <div class="panel panel-transparent">
          <h1>Recorder.js simple WAV export example</h1>

		  <p>Make sure you are using a recent version of Google Chrome.</p>
		  <p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting feedback!</p>
		
		  <button class="btn btn-primary" id = "record" (click)="start(this);" [ngClass]='{disabled: isOn}'>record</button>
		  <button class="btn btn-primary" id = "stop" (click)="stop(this);" [ngClass]='{disabled: isOff}'>stop</button>
		  
		  <h2>Recordings</h2>
		  <ul id="recordingslist"></ul>
		  
		  <h2>Log</h2>
		  <pre id="log"></pre>
		 </div>
  <!-- END PANEL -->
</div>

</div>
<!-- END PAGE CONTENT -->

<!-- START FOOTER -->

<!-- END FOOTER -->

</div>
<!-- END PAGE CONTENT WRAPPER -->

5: In your audio-files.component.ts file, paste that code here:

import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../../app.component';
import { ElementRef } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from "@angular/forms";
import { AudioFileService } from "../../shared/_services/audio-file.service";
import { NotificationService } from '../../shared/utils/notification.service';
import { ConfigService } from '../../shared/utils/config.service';
import { Router } from "@angular/router";
import { Http,Response,Headers,RequestOptions, URLSearchParams } from "@angular/http";
import { Observable } from "rxjs";
declare var $:any;
declare var recorderObject: any;
declare function startRecording(button) : void;
declare function stopRecording(button) : void;


@Component({
  selector: 'app-audio-files',
  templateUrl: './audio-files.component.html',
  styleUrls: ['./audio-files.component.css']
})
export class AudioFilesComponent implements OnInit {
  breadcrum: string;
  dashboardIcon: string;
  audioIcon: string;
  isOn:boolean;
  isOff:boolean;
 

  constructor(private audioFileService:AudioFileService,
              fb: FormBuilder,
  		      private notificationService: NotificationService,
  		      private elRef: ElementRef,
  		      private appComponent: AppComponent,
  		      private configService: ConfigService,
  		      private router: Router,
  		      private http: Http) { }

  ngOnInit() {
  	
  	 this.audioFileService.getAudioFiles()
  	  	.subscribe((res)=>{
  	  	 	this.breadcrum = res['breadcrum'];
  	  	 	this.dashboardIcon = res['dashboardIcon'];
  	  	 	this.audioIcon = res['audioIcon'];
  	  	},
  	  	error=>{
  	  		//this.notificationService.printErrorMessage('Warning','Failed to load MOH Files','danger');
  	  	});
  	this.isOn = false;
  	this.isOff = true;
  	recorderObject.recorder();
  	this.appComponent.isLogin = true;
	this.appComponent.wrapper = 'page-container';
  }
  
  public start(button){
  	startRecording(button);
  	this.isOn = true;
    this.isOff = false;
  };
  
  public stop(button){
  	stopRecording(button);
  	this.isOn = false;
    this.isOff = true;
  }
  /*startRecording(button) {
    recorder && recorder.record();
    this.isOn = true;
    this.isOff = false;

    console.log('Recording.....');
  }*/

}

In that file i has declare two functions startRecording(button) and stopRecording(button). They are tells us that how we can call functions in typescript file that are in external javascript file recorderFunctions.js. I hope that you will implement it easily. Happy Coding :)