オーディオをAngular2で録音する

Angular2でオーディオと再生を録音する方法。私はhttps://logbon72.github.io/angular-recorder/を見るが、それはAngularJSのためである。助けてくださいオーディオをAngular2で録音する

出典

2016-10-12 Insane Rose

現在、私はこの機能を実装しているのは、JavaScriptを使用しています。私はコンポーネントや指令を書くことに取り組んでいます。 Ref： 1. https://webaudiodemos.appspot.com/AudioRecorder/index.html 2. https://github.com/mattdiamond/Recorderjs これらのコードは角度2で使用でき、私はそれをテストしました。

出典

2017-01-29 11:34:35

ここでは、角度2で録音するためのJRecorderプラグインを実装します。まず、そのURLからそのプラグインをダウンロードしてくださいhttps://github.com/mattdiamond/Recorderjs。今、何をする必要がありますか？

1：まず、コードをあなたのangular2/SRC /資産/ JSのフォルダにあるファイルrecorderFunctions.jsファイルを作成し、そのファイル内のコードをコピーしては、以下のとおりです。

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：また、mattdiamond/Recorderjsのdistフォルダからrecorder.jsファイルをコピーして、そのファイルを角度2のsrc/assets/jsフォルダに貼り付けてください。あなたの角2のindex.htmlファイルにこれらの2つのファイルの参照を与えるのを忘れないでください。

3：今すぐあなたのターミナルを開いて、角度-CLI

ng g c audio-files

4入力することによって、使用してコンポーネントを作成します。あなたのオーディオfiles.component.htmlファイルでは、ここにそのコードを貼り付けます。

<!-- 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：あなたのオーディオfiles.component.tsファイルで、ここにそのコードを貼り付けます。そのファイルには

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.....'); 
 
    }*/ 
 

 
}

を、私は2つの機能startRecording（ボタン）とstopRecording（ボタン）を宣言しています。彼らは、外部のjavascriptファイルrecorderFunctions.jsにあるtypescriptファイルの関数をどのように呼び出すことができるかを示しています。私はあなたが簡単にそれを実装することを願っています。ハッピーコーディング:)

出典

2017-04-04 19:33:35

オーディオをAngular2で録音する

答えて

関連する問題