Grabación de audio html5

Question

¿Es posible grabar sonido con html5 todavía? He descargado la última versión canaria de chrome y uso el siguiente código:

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia ({audio: true}, gotAudio, noStream);

Esto luego solicita al usuario que permita la grabación de audio, y si dice "sí", aparece un mensaje que indica que Chrome está grabando. Sin embargo, ¿es posible acceder al buffer de audio con los datos sin procesar? No parece ser capaz de descubrir cómo. Hay especificaciones sugeridas que aún no se han implementado. ¿Alguien sabe si realmente se puede hacer en cualquier navegador ahora y proporciona instrucciones?

Answer 1

Aquí puede encontrar mi ejemplo, pero no está funcionando (en parte). Porque la grabación de AUDIO aún no está implementada en chrome. Es por eso que obtendrá un error 404, que dice que no puede encontrar BLOB.

También hay un formulario debajo porque mi objetivo era enviar ese BLOB a un archivo php, pero como no funciona, no puedo intentarlo. Guárdalo, puedes usarlo más tarde.

<audio></audio> 
<input onclick="startRecording()" type="button" value="start recording" /> 
<input onclick="stopRecording()" type="button" value="stop recording and play" /> 
<div></div> 
<!-- 
<form enctype="multipart/form-data"> 
<input name="file" type="file" /> 
<input type="button" value="Upload" /> 
</form> 
--> 

<script> 
    var onFailed = function(e) { 
    console.log('sorry :(', e); 
    }; 

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream 

var audio = document.querySelector('audio'); 
var stop = document.getElementById('stop'); 


    function startRecording(){ 
     if (navigator.getUserMedia) { 
      navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) { 
      audio.src = window.URL.createObjectURL(stream); 
     document.getElementsByTagName('div')[0].innerHTML = audio.src; 
      localStream = stream; 
      }, onFailed); 
     } else { 
      alert('Unsupported'); 
      //audio.src = 'someaudio.ogg'; // fallback. 
     } 
    } 



    function stopRecording(){ 
     localStream.stop(); 
     audio.play(); 
    } 


    function sendAudio(){ 

    } 
</script> 

nota: algo de información y howto para Firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Audio de Webkit y Chrome admiten grabación, sin embargo, a medida que evolucionan sus API será difícil mantener el código que los utiliza.

Un proyecto de código abierto activo denominado Sink.js permite la grabación y también le permite enviar muestras sin procesar: https://github.com/jussi-kalliokoski/sink.js/. Dado que el proyecto está bastante activo, han podido mantenerse al tanto de los cambios en Webkit y Chrome a medida que aparecen.

Answer 3

Ahora es posible acceder a la memoria intermedia de audio utilizando la API de contexto audio y getChannelData().

Aquí hay un proyecto en GitHub que los registros de audio directamente en formato MP3 y lo guarda en el servidor web: https://github.com/nusofthq/Recordmp3js

En recorder.js verá cómo se accede al búfer de audio de forma individual por los canales de este modo:

this.node.onaudioprocess = function(e){ 
     if (!recording) return; 
     worker.postMessage({ 
     command: 'record', 
     buffer: [ 
      e.inputBuffer.getChannelData(0), 
      //e.inputBuffer.getChannelData(1) 
     ] 
     }); 
    } 

Para una explicación más detallada de la aplicación se puede leer la siguiente entrada de blog: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/