少し前のプロジェクトでは、基本的に、ドキュメント、画像、その他のリソースをインポートした後、ページが PPT のようなレイアウトになり、画像を選択してオーディオを挿入できます。単一ページの編集には 2 つのタイプがあります。そしてグローバル編集。オーディオをインポートするには 2 つの方法があります。1 つはリソース ライブラリからインポートする方法、もう 1 つは録音を言及する方法です。
正直、HTML5のAudio APIは最初から触ったことがなく、引き継ぐ前のコードをベースに最適化する必要がありました。もちろん落とし穴もたくさんありますが、そのあたりの感想もお話します（基本的なオブジェクトの初期化や取得などは今回の内容ではないので割愛します。興味のある方はMDNを検索してみてください。）に関するドキュメント）:
録音を開始する前に、まず現在のデバイスが Audio API をサポートしているかどうかを取得する必要があります。以前のメソッド navigator.getUserMedia は、navigator.mediaDevices.getUserMedia に置き換えられました。通常、最新のブラウザーのほとんどは navigator.mediaDevices.getUserMedia の使用をサポートしています。 もちろん、MDN は互換性情報も提供します。
const promisifiedOldGUM = function(constraints) { // まず getUserMedia を取得します (存在する場合) const getUserMedia = navigator.webkitGetUserMedia || 一部のブラウザはそれを実装していません - 拒否された Promise を返します。エラーあり // 一貫したインターフェイスを維持するため if (!getUserMedia) { return Promise.reject( new Error('getUserMedia はこのブラウザには実装されていません') ); } // それ以外の場合は、古い navigator.getUserMedia への呼び出しを Promise return new Promise(function(resolve, replace) { getUserMedia.call (navigator,constraints,resolve,reject) });}; // 古いブラウザは mediaDevices をまったく実装していない可能性があるため、最初に空のオブジェクトを設定します。 (navigator.mediaDevices === 未定義) { navigator.mediaDevices = {};} // 一部のブラウザは、mediaDevices を部分的に実装しています。// 既存のプロパティを上書きするため、getUserMedia でオブジェクトを割り当てることはできません。// ここでは、 getUserMedia プロパティが存在しない場合は、それを追加するだけです。if (navigator.mediaDevices.getUserMedia === unknown) { 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 = 'ユーザーは Web ページによる記録デバイスの呼び出しを禁止しています' // 記録デバイスが接続されていません case 'NotFoundError': case; 'DevicesNotFoundError': errorMessage = '録音デバイスが見つかりません'; // その他のエラーの場合 'NotSupportedError': 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 = アナライザー => { const dataArray = new Uint8Array(analyser.frequencyBinCount); const data = dataArray.slice(100, 1000); a + b); 合計を返します。詳細については、https://developer.mozilla.org/zh-CN/docs/Web/API/AnalyserNode/frequencyBinCount を参照してください。
他の
今回遭遇した問題のほとんどは互換性の問題で、特に最初は録画期間が間違って書かれていて直接フリーズしてしまうという落とし穴に遭遇しました。この経験は、HTML5 API のいくつかのギャップも補いました。もちろん、最も重要なことは、この種のネイティブ API ドキュメントは、MDN を直接表示することで簡単かつ粗雑に取得できることを皆さんに思い出していただくことです。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。