Lo que finalmente quiero hacer es grabar desde el micrófono del usuario y subir el archivo al servidor cuando haya terminado. Hasta ahora, he logrado hacer una transmisión a un elemento con el siguiente código:
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}
¿Cómo paso de eso a grabar en un archivo?
javascript
html
html5-audio
audio-recording
Fibericon
fuente
fuente
Respuestas:
Hay una demostración de grabación bastante completa disponible en: http://webaudiodemos.appspot.com/AudioRecorder/index.html
Le permite grabar audio en el navegador, luego le da la opción de exportar y descargar lo que ha grabado.
Puede ver la fuente de esa página para encontrar enlaces al javascript, pero para resumir, hay un
Recorder
objeto que contiene unexportWAV
método y unforceDownload
método.fuente
El código que se muestra a continuación tiene derechos de autor de Matt Diamond y está disponible para su uso bajo licencia MIT. Los archivos originales están aquí:
Guarde estos archivos y use
fuente
Actualice ahora Chrome también es compatible con MediaRecorder API desde v47. Lo mismo sería usarlo (adivinar que el método de grabación nativo será más rápido que evitarlo), la API es realmente fácil de usar y encontrará toneladas de respuestas sobre cómo cargar un blob para el servidor .
Demostración : funcionaría en Chrome y Firefox, dejando fuera intencionalmente empujar blob al servidor ...
Código fuente
Actualmente, hay tres formas de hacerlo:wav
[todo el código del lado del cliente, grabación sin comprimir], puede consultar -> Recorderjs . Problema: el tamaño del archivo es bastante grande, se requiere más ancho de banda de carga.mp3
[todo el código del lado del cliente, grabación comprimida], puede consultar -> mp3Recorder . Problema: personalmente, encuentro que la calidad es mala, también existe este problema de licencia.como
ogg
[node.js
código cliente + servidor ( ), grabación comprimida, horas infinitas de grabación sin bloqueo del navegador], puede consultar -> recordOpus , ya sea solo grabación del lado del cliente o agrupación cliente-servidor, la elección es suya.Ejemplo de grabación de ogg (solo firefox):
Fiddle Demo para grabación ogg.fuente
Este es un simple grabador y editor de sonido JavaScript. Puedes probarlo.
https://www.danieldemmel.me/JSSoundRecorder/
Puede descargar desde aquí
https://github.com/daaain/JSSoundRecorder
fuente
Aquí hay un proyecto de gitHub que hace exactamente eso.
Graba el audio del navegador en formato mp3 y lo guarda automáticamente en el servidor web. https://github.com/Audior/Recordmp3js
También puede ver una explicación detallada de la implementación: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
fuente
Puede usar Recordmp3js de GitHub para cumplir sus requisitos. Puede grabar desde el micrófono del usuario y luego obtener el archivo como mp3. Finalmente cárguelo a su servidor.
Usé esto en mi demo. Ya hay una muestra disponible con el código fuente del autor en esta ubicación: https://github.com/Audior/Recordmp3js
La demostración está aquí: http://audior.ec/recordmp3js/
Pero actualmente solo funciona en Chrome y Firefox.
Parece funcionar bien y bastante simple. Espero que esto ayude.
fuente
getUserMedia()
solo funciona en orígenes seguros (https, localhost) desde Chrome 47Transmita audio en tiempo real sin esperar a que termine la grabación: https://github.com/noamtcohen/AudioStreamer
Esto transmite datos PCM pero puede modificar el código para transmitir mp3 o Speex
fuente