Запись аудио в Angular2

Question

Запись аудио в Angular2

Как записывать аудио и воспроизводить в Angular2. Я вижу https://logbon72.github.io/angular-recorder/ но это для AngularJS. пожалуйста, помогите мне

0

angular recorder

Источник

user6245234 12 окт '16 в 14:03

2 ответа

Другие вопросы по тегам angular recorder

user7816240 04 апр '17 в 19:33 2017-04-04 19:33 · Answer 1 · 2017-04-04 19:33

Теперь я собираюсь реализовать плагин JRecorder для записи звука в Angular 2. Сначала загрузите этот плагин с этого URL-адреса https://github.com/mattdiamond/Recorderjs. Что теперь делать?

1: Сначала создайте один файл RecordFunctions.js в вашей папке angular2 / src / assets / 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 в папке mattdiamond / Recorderjs и вставьте этот файл также в вашу угловую папку 2 src / assets / js. Не забудьте дать ссылки на эти два файла в вашем угловом 2 index.html файле.

3: Теперь откройте свой терминал и создайте компонент, используя angular-cli, введя

ng g c audio-files

4: Вставьте этот код в ваш файл audio-files.component.html:

  <!-- 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: Вставьте этот код в ваш файл audio-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,
          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.....');
  }*/

}

В этом файле я объявил две функции startRecording (кнопка) и stopRecording (кнопка). Они говорят нам о том, как мы можем вызывать функции в файле машинописного текста, которые находятся во внешнем файле JavaScript, записывающем Functions.js. Я надеюсь, что вы легко это осуществите. Удачного кодирования:)

user2000468 29 янв '17 в 11:34 2017-01-29 11:34 · Answer 2 · 2017-01-29 11:34

В настоящее время я реализую эту функцию только с помощью javascript. Я работаю над написанием компонента или директивы. Ссылка: 1. https://webaudiodemos.appspot.com/AudioRecorder/index.html2. https://github.com/mattdiamond/Recorderjs Этот код можно использовать в Angular 2, и я протестировал его.

0

Источник

user2000468 29 янв '17 в 11:34