0
Angular2로 오디오 및 재생을 녹음하는 방법. 나는 https://logbon72.github.io/angular-recorder/을 본다. 그러나 그것은 AngularJS를위한 것이다. 제발 도와주세요녹음 오디오 in Angular2
A
답변
0
현재이 기능을 구현하는 것은 자바 스크립트를 사용하는 것입니다. 나는 구성 요소 나 지시어를 쓰고있다. Ref : 1. https://webaudiodemos.appspot.com/AudioRecorder/index.html 2. https://github.com/mattdiamond/Recorderjs 이 코드는 2 번 각도에서 사용할 수 있으며 테스트 해 보았습니다.
2
이제 Angular 2에서 오디오 녹음을위한 JRecorder 플러그인을 구현할 예정입니다. 해당 URL에서 해당 플러그인을 먼저 다운로드하십시오. https://github.com/mattdiamond/Recorderjs. 이제 어떻게해야할까요?
1 : 먼저 당신의 angular2/SRC/자산에 하나 개의 파일 recorderFunctions.js 파일을 만듭니다는/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 파일에이 두 파일에 대한 참조를 제공하는 것을 잊지 마십시오.
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.....');
}*/
}를 내가 두 가지 기능 startRecording (버튼) 및 stopRecording (버튼) 선언이 해당 파일에 . 그들은 외부 자바 스크립트 파일 인 recorderFunctions.js에있는 typescript 파일에서 함수를 호출 할 수있는 방법을 알려줍니다. 당신이 쉽게 구현할 수 있기를 바랍니다. 해피 코딩 :)