¿Cómo puedo grabar la voz de un usuario usando Javascript/PHP?

Question

Actualmente estoy intentando hacer un sitio de prueba que permita a los usuarios grabar notas de voz y guardarlas en sus cuentas. ¿Cuál es la mejor manera de hacerlo utilizando PHP o JavaScript?

Los pasos que busco tener para este proceso son:

1) El usuario hace clic en el botón de grabación. 2) Inicio de la secuencia de grabación. 3) Detener la secuencia. 4) Nombrar el archivo y enviarlo al servidor.

Mi consulta principal se centra en el 2do paso, donde necesitaría algún mecanismo que interactuaría con el micrófono del usuario para grabar la voz. Todavía soy nuevo en el desarrollo web per se y no sé cómo puedo invocar la grabación de voz usando JavaScript.

Al buscar en Google, encontré algunos enlaces en StackOverflow que trataban problemas similares pero las respuestas no eran útiles. Muchas soluciones apuntan a Flash, pero me gustaría evitar eso tanto como sea posible. Entonces mi pregunta se reduce a "¿Es posible grabar voz usando JavaScript? En caso afirmativo, ¿cómo?"

Gracias de antemano.

Answer 1

La API de audio HTML5 no es ampliamente compatible en los navegadores, creo que funciona en Chrome y Firefox se ha agregado recientemente a sus nightlies ... Los prefijos del navegador son necesarios en esta etapa, pero la API general es ...

navigator.getUserMedia({audio: true}, function(stream) { /* do stuff */ }); 

Eso sería webkitGetUserMedia para Chrome y mozGetUserMedia para Firefox.

Sus opciones más consistentes en este momento son a través de complementos del navegador como Flash o Java o para crear un cliente de escritorio que el usuario necesitaría instalar.

recursos de interés en relación con getUserMedia:

• Intro to getUserMedia
• getUserMedia added to Firefox nightlies
• Audio only issues with getUserMedia in Chromium

La siguiente pregunta que puede ayudar aún más:

tutorial on using flash or java servlet to upload microphone data from browser to server?

Answer 2

Ahora usted es capaz de grabar desde un micrófono mediante la creación de un gráfico de audio que conecta su MediaStream local a un ScriptProcessingNode:

navigator.webkitGetUserMedia({video: true, audio: true}, function(stream) { 
    var audioContext = new webkitAudioContext, 
     mediaStreamSource = context.createMediaStreamSource(stream), 
     processor = context.createJavaScriptNode(4096, 2, 2); 

    processor.onaudioprocess = function(e) { 
     // Process the audio data found in e.inputBuffer 
    }; 

    mediaStreamSource.connect(processor); 
    processor.connect(context.destination); 
}); 

(Uso de prefijos de proveedores Chrome)

Puede conectar esto a Websockets o incluso XHR simple para enviar los fragmentos a su servidor, que pueden procesarlo en un archivo de audio.Tendrá que convertir cada canal de

no intercalada IEEE PCM lineal de 32 bits con un rango nominal de -1 -> +1

en el formato de su elección.

Un ejemplo similar de la grabación de audio, que lo codifica en un archivo WAV, y guardarlo (todo del lado del cliente) se puede encontrar aquí:

https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC

Más detalles sobre AudioContext:

http://docs.webplatform.org/wiki/apis/webaudio/AudioContext

Answer 3

Hasta que llegue la grabación de audio HTML5, realmente necesita poner juntas una solución que combine Flash y en dispositivos móviles, carga de archivos. En los dispositivos móviles, la pantalla de carga de archivos generalmente tiene una grabadora de audio o video, por lo que los usuarios pueden grabar directamente desde sus dispositivos.

Si el dispositivo no tiene una grabadora de audio en la carga de archivos, debe usar la grabadora de video y luego convertir el video a MP3 en el servidor. Así es como lo hacemos en recordmp3online.com.