HTML5 レコーディングで遭遇する落とし穴の詳細な説明

この記事では、HTML5 レコーディングの落とし穴の詳細な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

正直、最初はHTML5のAudio APIに触れたことがなく、引き継ぐ前のコードをベースに最適化する必要がありました。もちろん落とし穴もたくさんありますが、そのあたりの感想もお話します（基本的なオブジェクトの初期化や取得などは今回の内容ではないので割愛します。興味のある方はMDNを検索してみてください。）ドキュメント):

1. 互換性のために Audio API を呼び出す方法

2. 録音サウンドのサイズを取得します (周波数である必要があります)

3. 互換性を取得する録音を一時停止する方法

4. 現在の録音時間

録音前の準備

録音を開始する前に、まず現在のデバイスが Audio API をサポートしているかどうかを取得する必要があります。以前のメソッド navigator.getUserMedia は、navigator.mediaDevices.getUserMedia に置き換えられました。通常、最新のブラウザーのほとんどは navigator.mediaDevices.getUserMedia の使用をサポートしています。もちろん、MDN は互換性に関する手順も提供します

const promisifiedOldGUM = function(constraints) {
 // First get ahold of getUserMedia, if present
 const getUserMedia =
 navigator.getUserMedia ||
 navigator.webkitGetUserMedia ||
 navigator.mozGetUserMedia;
 
 // 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(resolve, reject) {
 getUserMedia.call(navigator, constraints, resolve, reject);
 });
};
 
// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
 navigator.mediaDevices = {};
}
 
// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
 navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}

このメソッドは非同期であるため、互換性のないものを処理できます。デバイスはフレンドリーなプロンプトを表示します

navigator.mediaDevices.getUserMedia(constraints).then(
 function(mediaStream) {
 // 成功
 },
 function(error) {
 // 失败
 const { name } = error;
 let errorMessage;
 switch (name) {
 // 用户拒绝
 case 'NotAllowedError':
 case 'PermissionDeniedError':
 errorMessage = '用户已禁止网页调用录音设备';
 break;
 // 没接入录音设备
 case 'NotFoundError':
 case 'DevicesNotFoundError':
 errorMessage = '录音设备未找到';
 break;
 // 其它错误
 case 'NotSupportedError':
 errorMessage = '不支持录音功能';
 break;
 default:
 errorMessage = '录音调用错误';
 window.console.log(error);
 }
 return errorMessage;
 }
);

うまくいけば、次のステップに進むことができます。

(コンテキストの取得方法は今回は中心ではないので省略します)

録画開始、録画一時停止

ここで特別なポイントがあります。つまり、中間変数を追加する必要があります。現在録音が行われているかどうかを識別します。 Firefox ブラウザでは問題が発生したため、録画プロセスは正常でしたが、クリックして一時停止できないことがわかりました。そのときは切断方法を使用しました。この方法ではすべての接続を切断する必要があります。その後、開始をクリックすると true に設定され、一時停止すると false に設定されるため、中間変数 this.isRecording を追加する必要があることが判明しました。

録音を開始すると、onaudioprocess で録音リスニングイベントが発生します。 true が返された場合、ストリームは書き込まれます。 false が返された場合、ストリームは書き込まれません。したがって、this.isRecording を判断し、 false の場合は直接返します

// 一些初始化
const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(mediaStream);
const scriptNode = audioContext.createScriptProcessor(
 BUFFER_SIZE,
 INPUT_CHANNELS_NUM,
 OUPUT_CHANNELS_NUM
);
sourceNode.connect(this.scriptNode);
scriptNode.connect(this.audioContext.destination);
// 监听录音的过程
scriptNode.onaudioprocess = event => {
 if (!this.isRecording) return; // 判断是否正则录音
 this.buffers.push(event.inputBuffer.getChannelData(0)); // 获取当前频道的数据，并写入数组
};

もちろん、ここに落とし穴があります。つまり、現在の録音時間を取得するメソッドが付属しているため、使用できなくなります。これは実際には本当の一時停止ではありませんが、ストリームに書き込むだけです。したがって、現在の録音時間を取得する必要もあります。これは、式

const getDuration = () => {
    return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096为一个流的长度，sampleRate 为采样率
}

を通じて取得する必要があります。この方法で、正しい録音時間を取得できます。

録音を終了する

録音を終了する方法は、まず一時停止し、必要に応じてリスニングまたはその他の操作を実行してから、ストレージ ストリームの配列長を 0 に設定することです。

頻度を取得

getVoiceSize = analyser => {
 const dataArray = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(dataArray);
 const data = dataArray.slice(100, 1000);
 const sum = data.reduce((a, b) => a + b);
 return sum;
};

その他

1. HTTPS: Chrome では、サイト全体で HTTPS の使用を許可する必要があります

2. WeChat: WeChat の組み込みブラウザは、使用するために JSSDK を呼び出す必要があります

3. オーディオ形式の変換: オーディオ形式を変換する方法はたくさんあります。基本的に、見つかる情報のほとんどは相互にコピーされます。もちろん、オーディオの品質の問題もありますが、これについては説明しません。ここで詳細を説明します。

結論

今回私が遭遇した問題のほとんどは互換性の問題だったので、特にモバイル側で多くの落とし穴に遭遇しました、最初は録画の取得方法に誤りがありました。持続時間に問題があり、直接行き詰まった状況につながります。この経験は、HTML5 API のいくつかのギャップも補いました。もちろん、最も重要なことは、この種のネイティブ API ドキュメントは、MDN を直接表示することで簡単かつ粗雑に取得できることを皆さんに思い出していただくことです。

関連おすすめ:

録画に関するおすすめ記事10選

WeChatが開発した録画機能

HTML5 Webページの録画と圧縮サンプルコードの詳細説明

以上がHTML5 レコーディングで遭遇する落とし穴の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。