Как записывать звук и воспроизведение в Angular2. Я вижу https://logbon72.github.io/angular-recorder/, но это для AngularJS. Пожалуйста, помогите мнеЗапись аудио в Angular2
ответ
В настоящее время я реализую эту функцию, просто используя javascript. Я работаю над написанием компонента или директивы. Ref: 1. https://webaudiodemos.appspot.com/AudioRecorder/index.html 2. https://github.com/mattdiamond/Recorderjs Этот код может использоваться в угловых 2, и у меня есть тест.
Теперь я собираюсь внедрить плагин JRecorder для записи звука в Angular 2. Сначала загрузите этот плагин с этого URL-адреса https://github.com/mattdiamond/Recorderjs. Теперь, что делать?
1: Первый Создать один файл recorderFunctions.js файл в ваших angular2/SRC/активов/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: Теперь также скопируйте файл recorder.js из папки dist mattmiamond/Recorderjs и вставьте этот файл также в свою угловую папку 2 src/assets/js. Не забудьте указать ссылки на эти два файла в вашем угловом файле 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.....');
}*/
}
В этом файле я есть объявить две функции startRecording (кнопка) и stopRecording (кнопка) , Они говорят нам, что мы можем вызывать функции в файле машинописных файлов, которые находятся во внешнем javascript-файле recorderFunctions.js. Я надеюсь, что вы легко его реализуете. Happy Code: