录音 voice record

import { HttpClient } from '@angular/common/http';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import * as RecordRTC from 'recordrtc';


declare let MediaRecorder: any;

function invokeSaveAsDialog(file, fileName) {
  if (!file) {
    throw 'Blob object is required.';
  }

  if (!file.type) {
    try {
      file.type = 'video/webm';
    } catch (e) { }
  }

  var fileExtension = (file.type || 'video/webm').split('/')[1];

  if (fileName && fileName.indexOf('.') !== -1) {
    var splitted = fileName.split('.');
    fileName = splitted[0];
    fileExtension = splitted[1];
  }

  var fileFullName = (fileName || (Math.round(Math.random() * 9999999999) + 888888888)) + '.' + fileExtension;

  if (typeof navigator.msSaveOrOpenBlob !== 'undefined') {
    return navigator.msSaveOrOpenBlob(file, fileFullName);
  } else if (typeof navigator.msSaveBlob !== 'undefined') {
    return navigator.msSaveBlob(file, fileFullName);
  }

  var hyperlink = document.createElement('a');
  hyperlink.href = URL.createObjectURL(file);
  hyperlink.download = fileFullName;

  (document.body || document.documentElement).appendChild(hyperlink);

  if (typeof hyperlink.click === 'function') {
    hyperlink.click();
  } else {
    hyperlink.target = '_blank';
    hyperlink.dispatchEvent(new MouseEvent('click', {
      view: window,
      bubbles: true,
      cancelable: true
    }));
  }

  URL.revokeObjectURL(hyperlink.href);
}
let mp3 = true;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  constructor(
    private http: HttpClient
  ) { }
  title = 'app';

  recordRTC: any;

  stop() {
    let recordRTC = this.recordRTC;
    recordRTC.stopRecording(() => {
      // 关闭 html5 navigator.mediaDevices.getUserMedia
      var track = this.stream.getTracks()[0]; // 0 是因为我们只有一个 track, 是可以 track 2 个的, 声音和影像
      track.stop();

      // ff 可以 skip 掉 fileReader, 直接拿 recordRTC.blob new File 也可以, 因为 ff 返回的就是 ogg 了 
      // 下面是针对 chrome 返回的是 wav, 很大, 所以使用 ffmpeg 压缩去 ogg 
      let fileReader = new FileReader();

      fileReader.onload = () => {
        recordRTC.clearRecordedData(); // reader 读出来后就可以释放 recordRTC 了. 

        if (mp3) {
          //压缩是很慢的, 所以要另开一个线程        
          var WorkerConstructor = require("worker-loader!./worker.js");
          var worker = new WorkerConstructor();
        }
        else {
          //压缩是很慢的, 所以要另开一个线程        
          var WorkerConstructor = require("worker-loader!./worker2.js");
          var worker = new WorkerConstructor();
        }

        worker.onmessage = (e) => {

          if (mp3) {
            console.log(e);
            var result = e.data.stream;        
            invokeSaveAsDialog(result, 'output.mp3');
            // recordRTC.save('dadad');
          }
          else {
            var result = e.data[0];
            // edge 不可以跑哦, 只有 chrome and ff ok 
            var blob = new File([result.data], 'output.ogg', {
              type: 'audio/ogg'
            });

            let formData = new FormData();
            formData.append('uploadFile', blob, 'output.ogg');

            // 上传
            // this.http.post('/api/uploadFile', formData).subscribe(() => {
            //   console.log('done');
            // });

            invokeSaveAsDialog(blob, 'output.ogg');
            // 做成 audio 
            let audio = new Audio();
            audio.controls = true;
            let url = window.URL.createObjectURL(blob);

            audio.src = url;
            let recordMp3Container = document.getElementById('recordmp3-container');
            recordMp3Container.appendChild(audio);
            audio.play();

            // 关闭 worker 
            worker.terminate();
          }
        };

        worker.postMessage(fileReader.result);
      };

      fileReader.readAsArrayBuffer(recordRTC.blob);
    });
  }

  stream: any

  go() {

    navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {

      let obj = {
        type: 'audio',
        recorderType: RecordRTC.StereoAudioRecorder,
        disableLogs: true,
        // numberOfAudioChannels: 1 // or leftChannel:true
      }
      if(mp3) obj['leftChannel'] = true;
 
      let recordRTC = RecordRTC(stream,obj);
      recordRTC.startRecording();
      this.recordRTC = recordRTC;
      this.stream = stream;
    }).catch(() => {
      console.log('user no allow');
    });
  }
}

//var url = require("file-loader!./lame.all.js");
var url = require("file-loader!lamejs/lame.all.js");

self.importScripts(url);

self.onmessage = function (e) {
    let stream = e.data;
    let streamArray = new Int16Array(stream);
    streamArray = streamArray.slice(50); //去掉一开始的杂音
    let buffer = [];
    let mp3encoder = new lamejs.Mp3Encoder(1, 44100, 128);

    let mp3Data = mp3encoder.encodeBuffer(streamArray);
    buffer.push(mp3Data);
    mp3Data = mp3encoder.flush(); //获取最后一个 part
    buffer.push(mp3Data);
    let blob = new Blob(buffer, { type: 'audio/mp3' });
    var workerResult = {
        stream: blob
    };
    self.postMessage(workerResult);
}

let url = require("file-loader!./ffmpeg_asm.js");

self.importScripts(url);

let print = (text) => {
    console.log(text);
 };
self.onmessage = (event) => {
    console.log('worker e ', event);
    console.log('worker e.data ', event.data);
    let blob = event.data;
    let result = ffmpeg_run({
        print: print,
        printErr: print,
        files: [
            {
                data: new Uint8Array(blob),
                name: "whatever.wav"
            }
        ],
        arguments: '-i whatever.wav -c:a vorbis -b:a 4800k -strict experimental output.ogg'.split(' ')
    });
    self.postMessage(result);
};