私はスピーチを録音し、ダウンロード可能なWAVファイルに変換する作業をしています。 Angular6とMediaRecorderを使用しています。最初にblobを取得し、blobから.wavファイルを取得します。問題は、WAVファイル(再生可能で音が良い)がプロセス中にそのプロパティの多くを失い、有効なWAVではないことです。それはWebMファイルであり続けます。さらに処理するには、本当に有効で高品質のWAVファイルが必要です。最終的に、300KBまでの大きなファイルではなく、20KBまでのファイルを取得します。
私のコードは次のようになります:
_//convert Blob to File. Pass the blob and the file title as arguments
var blobToFile = (theBlob: Blob, fileName:string): File => {
var b: any = theBlob;
//Add properties to the blob
b.lastModifiedDate = new Date();
b.name = fileName;
return <File>theBlob;
}
var browser = <any>navigator;
var headers = new Headers();
var audioCtx = new AudioContext();
var chunks =[];
var constraints = { audio: true, video: false };
var promisifiedOldGUM = function(constraints, successCallback, errorCallback) {
var getUserMedia = (browser.getUserMedia || browser.webkitGetUserMedia || browser.mozGetUserMedia || browser.msGetUserMedia);
// Some browsers just don't implement it - return a rejected promise with an error to keep a consistent interface
if(!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
return new Promise(function(successCallback, errorCallback) {
getUserMedia.call(browser, constraints, successCallback, errorCallback);
});
}
if (browser.mediaDevices.getUserMedia) {
browser.mediaDevices.getUserMedia(constraints).then((stream) => {
this.mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.onstop = function(){
var last_bit= chunks[chunks.length-1];
var blob = new Blob([last_bit], { 'type' : 'audio/wav' });
var audioURL = window.URL.createObjectURL(blob);
//convert Blob to file
var file = blobToFile(blob, "my-recording.wav");
var link = document.createElement("a");
link.href = audioURL;
link.download = 'audio_recording_' + new Date().getTime() + '.wav';
link.innerHTML = "download file";
document.body.appendChild(link);
};
_
また、_typings.d.ts
_ファイルのMediaRecorderセットアップは次のようになります。
_declare class MediaRecorder extends EventTarget {
// readonly mimeType: string;
readonly MimeType: 'audio/x-wav'; // 'audio/vnd.wav';
readonly state: 'inactive' | 'recording' | 'paused';
readonly stream: MediaStream;
ignoreMutedMedia: boolean;
videoBitsPerSecond: number;
audioBitsPerSecond: 16000//number;
ondataavailable: (event : MediaRecorderDataAvailableEvent) => void;
onerror: (event: MediaRecorderErrorEvent) => void;
onpause: () => void;
onresume: () => void;
onstart: () => void;
onstop: () => void;
constructor(stream: MediaStream);
start();
stop();
resume();
pause();
isTypeSupported(type: string): boolean;
requestData();
addEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof MediaRecorderEventMap>(type: K, listener: (this: MediaStream, ev: MediaRecorderEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
_
変換中の録音品質を維持するためにblobToFile()
関数を変更する方法がわかりません。これを手伝っていただければ幸いです。
私があなたが持っているファイルのメタデータで見ることができるように リンクされた コメントで。ファイルを圧縮するコーデック(ここではOpus)を使用します。
私は2つの解決策を見ます:
WAV
コンテナーを使用しますあなたがチャットで私に問題を説明したように、私はそれが2番目の解決策であると思います。私自身はmediarecorderを使用していませんが、mimeタイプが機能するかどうかを確認するためにこのメソッドを見つけました。
MediaRecorder.isTypeSupported("audio/wav;codecs=MS_PCM")
次に、Blob
を作成するときにmimeタイプをに変更することをお勧めします。
new Blob(chunks, { 'type' : 'audio/wav; codecs=MS_PCM' });
または
new Blob(chunks, { 'type' : 'audio/wav; codecs=0' });
新しいmediaRecorder
を作成することで、wav
インスタンスの結果をBlob
に変換できます。簡単ですが、それほど明白ではなく、Chromeでのみ利用可能です(これはv77.0.3865.90でテストしました)。
ブラウザのコンソールでMediaRecorder.isTypeSupported('audio/wav')
がfalse
を返した場合でも、次のことができます。
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
this.mediaRecorder.ondataavailable = (e) => {
const blobDataInWebaFormat = e.data; // .weba = webaudio; subset of webm
const blobDataInWavFormat: Blob = new Blob([blobDataInWebaFormat], { type : 'audio/wav; codecs=0' });
const dataUrl = URL.createObjectURL(blobDataInWavFormat);
console.log(dataUrl); // There you can listen to your recording in a wav format
});
};
});
1年後でも誰かに役立つことを願っています!