錄音 voice record
參考 :
http://air.ghost.io/recording-to-an-audio-file-using-html5-and-js/ (html5 基礎)
https://github.com/muaz-khan/RecordRTC
https://github.com/webpack-contrib/worker-loader
https://github.com/webpack-contrib/file-loader
https://github.com/muaz-khan/RecordRTC/issues/31 (wav 太大的解決方案)
https://github.com/muaz-khan/Ffmpeg.js/blob/master/wav-to-ogg.html#L209 ( ftmpeg wav to ogg 壓縮方案 )
http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/ (wav to mp3 壓縮方案, 超小, 聲音也差.., 可以使用 lamejs 比較新)
使用插件
npm install recordrtc
npm install --save-dev file-loader
npm install --save-dev worker-loader
要使用 file,worker loading 需要在 tsconfig.app.json 加上 "node"
"compilerOptions": {import * as RecordRTC from ‘recordrtc‘;"types": [ "node" ] },
startRecord() { navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { let recordRTC = RecordRTC(stream, { type: ‘audio‘, recorderType: RecordRTC.StereoAudioRecorder, disableLogs:true //leftChannel: true, //numberOfAudioChannels: 1 // or leftChannel:true }); recordRTC.startRecording(); this.recordRTC = recordRTC; this.stream = stream; }).catch(() => { console.log(‘user no allow‘); }); }
通過 html5 的 navigator.mediaDevices.getUserMedia 獲取用戶的 permission, 然後就可以獲取到聲音了
通過 RecordRTC 來做錄制. 如果是要 to mp3 的話, 可以選擇單聲道 (不過我試過 to mp3 效果聲音效果不好, 所以最好用了 .ogg)
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 了. //壓縮是很慢的, 所以要另開一個線程 var WorkerConstructor = require("worker-loader!./worker2.js"); var worker = new WorkerConstructor(); worker.onmessage = (e) => { var result = e.data[0]; // edge 不可以跑哦, 只有 chrome and ff ok var blob = new File([result.data], ‘whatever.ogg‘, { type: ‘audio/ogg‘ }); let formData = new FormData(); formData.append(‘uploadFile‘, blob, ‘whatever.ogg‘); // 上傳 this.http.post(‘/api/uploadFile‘, formData).subscribe(() => { console.log(‘done‘); }); // 做成 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); }); }
worker2.js
let url = require("file-loader!./ffmpeg_asm.js"); self.importScripts(url); let print = () => { }; self.onmessage = (event) => { 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); };
關鍵就是調用了 ffmpeg_run
https://archive.org/download/ffmpeg_asm/ffmpeg_asm.js
這個轉換器 18mb 非常大哦. 不過只要下載一次, 所以 ok 啦.
wav to mp3
步驟和上面一下, 使用單聲道.
然後 worker 用下面這個
//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.stream; 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); }
調用 lamejs 去壓縮.
.
錄音 voice record