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.
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.
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.
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.
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.
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.
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Hoy vamos a ver programar la impresión de un PDF generado a partir de HTML…
En este tutorial básico de JavaScript con HTML vamos a ver cómo llenar una lista…
En este artículo se presenta una guía para imprimir un PDF a partir de una…
En este post voy a enseñarte cómo imprimir un PDF a partir de su representación…
Esta web usa cookies.
Ver comentarios
Hola, no se me llena el cuadro con los dispositivos de entrada. ¿Que podria ser?
Puede que no existan dispositivos de entrada, no cuente con los permisos o no esté en un sitio seguro, entre otras cosas
la forma de guarlarlo en NODE seria igual?
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
Hola. No, no lo sé; me parece que es por el formato de audio que no se tiene la duración, lo mismo me pasó al reproducirlo con VLC.
Saludos