👨🏼‍🎓 💕 🏟️ Enregistrement du son JS à partir d'un microphone ou des commentaires vocaux 🔓 👎🏾 🥗

Enregistrement du son JS à partir d'un microphone ou des commentaires vocaux

Il n'y a pas longtemps, lors du développement d'une application web d'entreprise, le client souhaitait pouvoir laisser des commentaires vocaux. Auparavant, je n'étais pas venu pour rencontrer la création de contenu médiatique et j'ai commencé à étudier ce sujet avec intérêt.

Le réseau a fourni suffisamment d'informations générales sur le sujet de la création et du traitement de ce type de contenu, mais je n'ai pas trouvé d'exemple simple et pleinement fonctionnel. Après la mise en œuvre de la tâche par le client, j'ai décidé de publier l'exemple le plus simplifié d'enregistrement et de sauvegarde des commentaires vocaux et d'écrire un article. Peut-être que ce matériel sera utile à quelqu'un et aidera dans l'étude.

Énoncé du problème

Nous nous sommes donné pour tâche de développer une mini-application s'exécutant dans un navigateur qui vous permettra d'enregistrer un commentaire vocal, d'envoyer un enregistrement au serveur, le serveur sauvegardera l'enregistrement, en cas de succès, il renverra une réponse avec le nom du fichier créé et affichera l'objet sur la page afin que l'enregistrement puisse être écouté.

Enregistrer le son dans le navigateur

L'enregistrement sonore a été décidé d'être mis en œuvre à l'aide de l'API Web MediaStream Recording. Pour l'enregistrement, nous utilisons l'interface MediaRecorder (). Mais d'abord, créez une interface. Ayons index.html contenant uniquement les balises les plus élémentaires, et dans le corps de la balise nous inclurons un fichier avec notre futur JavaScript voice.js:

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Voice comments</title> </head> <body> <script src="voice.js"></script> </body> </html>

Créez un fichier voice.js, définissez-y une constante d'URL qui contiendra un lien vers un script qui reçoit le son enregistré. Ensuite, créez les boutons Démarrer et Arrêter pour démarrer et arrêter l'enregistrement sonore, ainsi que le bloc div dans lequel les enregistrements sauvegardés seront affichés. Sur ce notre interface est prête, vous pouvez procéder directement à l'enregistrement sonore.

Comme déjà mentionné pour l'enregistrement, nous utiliserons l'interface MediaRecorder () (pour plus d'informations sur l'interface, voir la documentation), pour son fonctionnement, il est nécessaire de déterminer le flux multimédia à partir duquel nous prendrons le son, initialisez-le uniquement car nous n'avons besoin que d'une piste audio.

 navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream)});

Nous avons maintenant la constante mediaRecorder, qui contient une instance de l'interface, et nous continuerons à travailler avec.

Pour démarrer l'enregistrement, nous devons appeler la méthode MediaRecorder.start (), pour arrêter l'enregistrement, la méthode MediaRecorder.stop (). Dans ce cas, MediaRecorder.stop () génère un événement disponible pour les données par lequel nous avons accès à l'enregistrement sonore numérisé sous la forme d'un tableau binaire.

Et donc nous allons décrire les événements ci-dessus, déclarer le tableau voice [] et y écrire les données reçues:

 navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let voice = []; document.querySelector('#start').addEventListener('click', function(){ mediaRecorder.start(); }); mediaRecorder.addEventListener("dataavailable",function(event) { voice.push(event.data); }); document.querySelector('#stop').addEventListener('click', function(){ mediaRecorder.stop(); }); });

Nous allons maintenant préparer les données reçues pour l'envoi. Pour ce faire, par l'événement d'arrêt, créez une instance BLOB, placez-y les données reçues et spécifiez le type de données MIME. Dans notre cas, ce sera audio / wav.

 mediaRecorder.addEventListener("stop", function() { const voiceBlob = new Blob(voice, { type: 'audio/wav' });

En conséquence, nous avons la constante voiceBlob dans laquelle se trouve le contenu de notre futur fichier wav avec l'enregistrement d'un message vocal.

Envoi d'un enregistrement au serveur

Pour envoyer un enregistrement au serveur, j'ai décidé d'utiliser la méthode fetch (). Étant donné que cette méthode est la plus moderne et fournit une interface améliorée pour faire des requêtes au serveur. Dans le cadre de notre tâche, nous devons lancer une requête POST dans le corps de laquelle envoyer le contenu de notre futur fichier pour sauvegarde sur le serveur (comment fonctionne la méthode fetch () et quelles fonctionnalités peuvent être trouvées dans la documentation en détail). Créez un nouveau formulaire avec le champ vocal et mettez-y le contenu de notre dossier.

 let fd = new FormData(); fd.append('voice', voiceBlob);

Nous créons une fonction asynchrone pour envoyer un message au serveur pour recevoir une réponse et afficher un objet audio pour lire un fichier déjà enregistré. En argument, la fonction prendra la forme créée ci-dessus.

Nous initions une demande de serveur:

 let promise = await fetch(URL, { method: 'POST', body: form});

Si la réponse HTTP du serveur ne contient pas de code d'erreur (le code de réponse est compris entre 200 et 299), il nous reste à décoder la réponse, à créer un nouvel objet audio sur la page, à déterminer ses propriétés et à l'afficher. La façon dont la réponse est formée sera discutée ci-dessous.

Enregistrement d'un fichier sur le serveur

Créons un script sur le serveur qui recevra notre requête POST avec un message vocal. Étant donné que l'enregistrement sonore que nous avons envoyé est essentiellement déjà un fichier dans le formulaire, nous le recevrons sur le serveur en conséquence:

 $uploadDir = 'voice/'; $typeFile = explode('/', $_FILES['voice']['type']); $uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]); if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) { $response = ['result'=>'OK', 'data'=>'../'.$uploadFile]; } else { $response = ['result'=>'ERROR', 'data'=>'']; } echo json_encode($response);

Vous pouvez trouver de nombreux exemples similaires de code PHP, traitant des fichiers reçus sur le réseau. Tout d'abord, initialisez les variables, $ uploadDir - le répertoire dans lequel le fichier reçu sera enregistré, le type de fichier & typeFile dans notre cas sera égal à wav et le nom de fichier complet, y compris le répertoire. Le nom de fichier dans ce cas est formé en combinant le nom de fichier "temporaire" et la valeur de chaîne de l'heure actuelle chiffrée à l'aide de la méthode md5. Si vous enregistrez avec succès le fichier avec un message vocal dans le répertoire spécifié, nous formons une réponse sous la forme d'un tableau contenant le champ de résultat égal à "OK" ou "ERREUR" selon le résultat et le champ "données" qui, en cas de traitement réussi, contient un lien vers le fichier enregistré.

Pour plus de commodité, nous transformons le tableau en objet JSON et l'envoyons comme réponse.

L'exemple de code complet est disponible sur GitHub .

PS Le navigateur vous permet d'enregistrer du contenu multimédia uniquement avec une connexion HTTPS sécurisée.

Enregistrement du son JS à partir d'un microphone ou des commentaires vocaux