Grabar audio con JavaScript y enviarlo a PHP

Grabar audio de micrófono con JavaScript y 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.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

5 comentarios en “Grabar audio de micrófono con JavaScript y PHP”

  1. Hola, he seguido tu tutorial y he logrado guardar el audio. Hasta reproducirlo en la web pero tengo problemas cuando se reproduce con una aplicación privada desarrollada en Android.
    Según me indican el audio se reproduce, pero no detecta la duración del archivo y el scroll de reproducción queda en 0.
    Sabes como asignar la duración al archivo o que configuración adicional se debe hacer para no tener este problema? Gracias por la info

Dejar un comentario