Comment enregistrer l'audio à l'aide de l'API MediaStream

Ce didacticiel montre la création d'une application Web pour l'enregistrement audio et le stockage côté serveur à l'aide de l'API Media Capture and Streams (API MediaStream). Les utilisateurs enregistrent l'audio, enregistrez-le sur le serveur et affichez / play les enregistrements enregistrés. Le côté serveur est implémenté avec Node.js et Express, tandis que le côté client utilise HTML, CSS (bootstrap) et javascript.

Caractéristiques de clé:

• Enregistrement côté client: L'API MediaStream gère l'accès aux microphones et l'enregistrement audio. Une interface simple avec un bouton d'enregistrement contrôle le processus.
• Stockage côté serveur: Un serveur Node.js / Express avec Multer Middleware gère les téléchargements de fichiers audio et le stockage dans un répertoire désigné.
• Playage et gestion: Les utilisateurs peuvent lire leurs enregistrements enregistrés directement à partir de la page Web. Une option de défausse permet la suppression des enregistrements.

Configuration du serveur (Node.js & Express):

1. Initialisation du projet: Créer un répertoire de projet, initialiser NPM (npm init -y) et installer les dépendances (npm i express nodemon multer).
2. Création de serveur (index.js): Un serveur express de base est créé pour gérer le routage et les téléchargements de fichiers.
3. Intégration de Multer: Multer Middleware est configuré pour gérer les téléchargements de fichiers, en les enregistrant dans le répertoire uploads avec des horodatages pour les noms de fichiers uniques.
4. Points de terminaison de l'API: Deux points de terminaison de l'API sont définis: /record (Post) pour le téléchargement d'enregistrements et /recordings (obtenir) pour récupérer une liste des enregistrements enregistrés.
5. Démarrer du serveur: Le serveur est lancé à l'aide de npm start.

Page d'enregistrement (côté client):

1. Structure HTML: Une page HTML (public/index.html) est créée avec un bouton d'enregistrement, un conteneur de lecteur audio et un conteneur pour afficher des enregistrements enregistrés. Bootstrap est utilisé pour le style.
2. CSS Styling (public/assets/css/index.css): CSS styles les éléments d'interface.
3. JavaScript Logic (public/assets/js/record.js): JavaScript gère l'interaction utilisateur, l'enregistrement à l'aide de getUserMedia et le téléchargement à l'aide de l'API Fetch. Les auditeurs d'événements gèrent l'enregistrement de démarrage / arrêt, d'économie, de rejet et de lecture.

flux de travail:

1. L'utilisateur clique sur le bouton d'enregistrement.
2. Le navigateur invite à l'accès au microphone.
3. À la permission, l'enregistrement audio commence.
4. À l'arrêt, l'enregistrement est enregistré comme un blob.
5. L'utilisateur peut enregistrer ou rejeter l'enregistrement.
6. Les enregistrements enregistrés sont téléchargés sur le serveur via le point de terminaison /record.
7. Le point final /recordings récupère une liste de fichiers enregistrés à afficher sur la page.

Conclusion:

Ce tutoriel fournit un guide complet pour créer une application d'enregistrement audio fonctionnelle. L'utilisation de l'API MediaStream et un composant côté serveur bien structuré assure une expérience robuste et conviviale. D'autres améliorations pourraient inclure des fonctionnalités plus avancées telles que la validation des fichiers, l'authentification des utilisateurs et les éléments d'interface utilisateur améliorés.

FAQ sur l'API MediaStream:

• Qu'est-ce que l'API MediaStream? Une API Web pour capturer, manipuler et streamier audio et vidéo.
• Comment cela fonctionne-t-il? donne accès aux flux multimédias à partir de périphériques (microphone, appareil photo) via JavaScript.
• Assistance audio et vidéo? prend en charge les deux.
• Capture vidéo? Utilisez getUserMedia pour accéder à l'appareil photo.
• Partage d'écran? possible, mais peut nécessiter des autorisations de navigateur supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!