MediaStream APIを使用してオーディオを記録する方法

このチュートリアルでは、メディアキャプチャおよびストリーミングAPI（Mediastream API）を使用して、オーディオ録音とサーバー側のストレージのためのWebアプリケーションの構築を示しています。 ユーザーはオーディオを記録し、サーバーに保存し、保存された録音を表示/再生します。 サーバー側はnode.jsとExpressで実装され、クライアント側はHTML、CSS（Bootstrap）、およびJavaScriptを使用します。

主要な機能：

クライアント側の録音：
• MediaStream APIは、マイクのアクセスとオーディオ録音を処理します。 レコードボタンを使用した単純なインターフェイスがプロセスを制御します。 サーバーサイドストレージ：
a node.js/expressサーバーMulterミドルウェアは、指定されたディレクトリでオーディオファイルのアップロードとストレージを管理します。
• 再生と管理：ユーザーは、保存した録音をWebページから直接再生することができます。 廃棄オプションにより、録音の削除が可能になります
• サーバーのセットアップ（node.js＆express）：

プロジェクトの初期化：プロジェクトディレクトリを作成し、npm（

）を初期化し、依存関係をインストールする（

）。
1. サーバー作成（index.js）：npm init -yルーティングとファイルアップロードを処理するために基本的なエクスプレスサーバーが作成されます。 npm i express nodemon multer
Multer Integration：
2. Multer Middlewareは、ファイルアップロードを処理するように構成されており、一意のファイル名用のタイムスタンプを使用してディレクトリに保存します。
APIエンドポイント：
3. 2つのAPIエンドポイントが定義されています：（post）アップロード録音のための（post）保存された録音のリストを取得するため。 uploads
サーバーの開始：
4. サーバーは。を使用して起動されます /record /recordings
録音ページ（クライアント側）：
5. npm start
html構造：

htmlページ（

）は、レコードボタン、オーディオプレーヤーコンテナ、保存された録音を表示するコンテナで作成されます。 ブートストラップはスタイリングに使用されます cssスタイリング（

）：

cssはインターフェイス要素をスタイルします。
1. javaScriptロジック（public/index.html）：
javaScriptは、ユーザーインタラクションを処理し、
2. を使用した記録、およびフェッチAPIを使用してアップロードします。 イベントリスナーは、録音の開始/停止、保存、破棄、および再生を管理します public/assets/css/index.css
3. ワークフロー：public/assets/js/record.js
   1. ユーザーはレコードボタンをクリックします。
   2. ブラウザは、マイクにアクセスするように求めています。
   3. 許可を得て、オーディオ録音が始まります。
   4. 停止時に、録音はブロブとして保存されます。
   5. ユーザーは録音を保存または破棄できます。
   6. 保存された録音は、/recordエンドポイントを介してサーバーにアップロードされます。
   7. エンドポイントは、ページに表示される保存されたファイルのリストを取得します。 /recordings

   

   結論：

   このチュートリアルは、機能的なオーディオ録音アプリケーションを構築するための包括的なガイドを提供します。 MediaStream APIと十分に構築されたサーバー側コンポーネントを使用すると、堅牢でユーザーフレンドリーなエクスペリエンスが保証されます。 さらなる機能強化には、ファイル検証、ユーザー認証、UI要素の改善など、より高度な機能が含まれます。 MediaStream APIについての

   faqs：

   MediaStream APIは何ですか？
   オーディオとビデオをキャプチャ、操作、およびストリーミングするためのWeb API。
   • どのように機能しますか？javascriptを介してデバイス（マイク、カメラ）からマルチメディアストリームへのアクセスを提供します。
   • オーディオサポートとビデオサポート？両方のサポート。
   • ビデオキャプチャ？を使用して、カメラにアクセスします。
   • スクリーン共有？可能性がありますが、追加のブラウザアクセス許可が必要になる場合があります。getUserMedia

以上がMediaStream APIを使用してオーディオを記録する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。