Grabar audio de micrófono con JavaScript y PHP

Publicado por parzibyte en

Grabar audio con JavaScript y enviarlo a PHP

En este post vamos a ver cómo grabar el audio proveniente del micrófono con JavaScript y PHP.

Grabar audio con JavaScript y enviarlo a PHP

Grabar audio con JavaScript y enviarlo a PHP

Vamos a acceder al micrófono con JavaScript y enviar el resultado a un servidor con PHP para almacenar la grabación como un archivo de audio; además, haremos que se pueda seleccionar un distinto dispositivo de grabación.

Grabar audio con JavaScript y enviarlo a servidor con PHP

Gran parte de este trabajo está basado en mi post anterior: cómo grabar audio del micrófono con JavaScript y descargar el archivo. Te recomiendo leerlo, porque saltaré la parte de la grabación con MediaRecorder.

Lo único que cambia es que ahora, en lugar de descargar el archivo, vamos a enviarlo a PHP usando fetch (un remplazo nativo a XMLHttpRequest) y FormData.

El código completo está en GitHub, analízalo ahí si quieres; aquí me encargaré de explicar las partes más importantes.

El evento stop de MediaRecorder

Normalmente descargamos el audio grabado con el siguiente código:

Pero ahora lo vamos a enviar a un servidor con PHP así que el BLOB lo adjuntamos en un FormData y lo mandamos a PHP, de la siguiente manera:

PHP devuelve el nombre del archivo que se acaba de guardar, así que proporcionamos un enlace para que el usuario pueda verlo. Esto es totalmente opcional, pero lo hago así para demostrarlo.

Por cierto, la ruta del script de php es guardar.php, podría ser otra ruta u otro nombre.

Recibir grabación en PHP

En la parte del servidor recibimos el archivo en el arreglo superglobal $_FILES y lo movemos a la ubicación del script, como vimos en este post de subida de archivos con PHP.

Obtenemos un nombre único con uniqid (aunque no criptográficamente seguro pero no importa, solo queremos aleatoridad) y guardamos el archivo. Al final imprimimos el nombre para regresarlo en la petición de JavaScript.

Archivos de audio recibidos por PHP

Archivos de audio recibidos por PHP

Conclusión

De esta manera queda demostrado que es totalmente posible grabar el audio del micrófono con JavaScript y enviar la grabación a un servidor con PHP.

Si tienes dudas sobre el formato, la obtención de permisos, compatibilidad con navegadores y otras cosas, mira el post anterior.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: