Enregistrer l'audio dans Angular2

Question

Comment enregistrer l'audio et la lecture dans Angular2. Je vois https://logbon72.github.io/angular-recorder/ mais c'est pour AngularJS. S'il vous plaît aidez-moi

Answer 1

Actuellement, ce que j'implémente cette fonctionnalité utilise simplement le javascript. Je travaille à l'écriture d'un composant ou d'une directive. Ref: 1. https://webaudiodemos.appspot.com/AudioRecorder/index.html 2. https://github.com/mattdiamond/Recorderjs Ces codes peuvent être utilisés dans l'angle 2 et je l'ai testé.

Answer 2

Maintenant, je vais implémenter JRecorder plugin pour l'enregistrement audio dans Angular 2. D'abord télécharger ce plugin à partir de cette URL https://github.com/mattdiamond/Recorderjs. Maintenant, quelle chose est à faire?

1: Créez d'abord un fichier recorderFunctions.js de fichier dans vos angular2/src/assets/dossier js et copier le code dans ce fichier, le code sont:

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: Copiez maintenant le fichier recorder.js à partir du dossier dist de mattdiamond/Recorderjs et collez ce fichier également dans votre répertoire angulaire 2 src/assets/js. N'oubliez pas de donner des références de ces deux fichiers dans votre fichier angulaire 2 index.html.

3: Maintenant, ouvrez votre terminal et créer composant à l'aide-cli angulaire en entrant

ng g c audio-files 

4: Dans votre fichier audio-files.component.html, collez ce code ici:

<!-- START PAGE CONTENT WRAPPER --> 
 
    <div class="page-content-wrapper "> 
 
    <!-- START PAGE CONTENT --> 
 
\t <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> 
 

 
\t \t <p>Make sure you are using a recent version of Google Chrome.</p> 
 
\t \t <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> 
 
\t \t 
 
\t \t <button class="btn btn-primary" id = "record" (click)="start(this);" [ngClass]='{disabled: isOn}'>record</button> 
 
\t \t <button class="btn btn-primary" id = "stop" (click)="stop(this);" [ngClass]='{disabled: isOff}'>stop</button> 
 
\t \t 
 
\t \t <h2>Recordings</h2> 
 
\t \t <ul id="recordingslist"></ul> 
 
\t \t 
 
\t \t <h2>Log</h2> 
 
\t \t <pre id="log"></pre> 
 
\t \t </div> 
 
    <!-- END PANEL --> 
 
</div> 
 

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

 
<!-- START FOOTER --> 
 

 
<!-- END FOOTER --> 
 

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

5: Dans votre fichier audio-files.component.ts, collez ce code ici:

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, 
 
    \t \t  private notificationService: NotificationService, 
 
    \t \t  private elRef: ElementRef, 
 
    \t \t  private appComponent: AppComponent, 
 
    \t \t  private configService: ConfigService, 
 
    \t \t  private router: Router, 
 
    \t \t  private http: Http) { } 
 

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

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

 
}

Dans ce fichier i a déclarer deux fonctions StartRecording (bouton) et stoprecording (bouton) . Ils nous disent comment nous pouvons appeler des fonctions dans un fichier tapuscrit qui sont dans le fichier javascript externe recorderFunctions.js. J'espère que vous l'appliquerez facilement. Happy Coding :)