Registrazione audio HTML5

Question

È possibile registrare ancora il suono con html5? Ho scaricato l'ultima versione canarino di chrome e uso il seguente codice:

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

Questo richiede all'utente di consentire la registrazione audio e, se si dice "sì", viene visualizzato un messaggio che indica che Chrome sta registrando. Tuttavia è possibile accedere al buffer audio con i dati grezzi in esso contenuti? Non riesco a scoprire come. Ci sono specifiche suggerite che non sono ancora state implementate, ma qualcuno sa se può essere effettivamente fatto su qualsiasi browser ora e fornisce istruzioni?

Answer 1

Qui puoi trovare il mio esempio, ma non funziona (in parte). Perché la registrazione AUDIO non è ancora stata implementata su Chrome. Ecco perché riceverai un errore 404, che dice che non è possibile trovare BLOB.

Inoltre c'è un modulo sotto è perché il mio obiettivo era inviare quel BLOB a un file php, ma dal momento che non funziona, non posso provare. Salvalo, puoi usarlo più tardi.

<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: alcune informazioni e howto per Firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Registrazione del supporto dell'API di Webkit e dell'API di Chrome, tuttavia con l'evolversi delle API sarà difficile mantenere il codice che le utilizza.

Un progetto open source attivo denominato Sink.js consente di registrare e consente anche di inviare campioni non elaborati: https://github.com/jussi-kalliokoski/sink.js/. Dal momento che il progetto è piuttosto attivo, sono riusciti a tenere il passo con i cambiamenti in Webkit e Chrome man mano che venivano pubblicati.

Answer 3

Ora è possibile accedere al buffer audio utilizzando API contesto audio e getChannelData().

Ecco un progetto su GitHub che registra audio direttamente in formato MP3 e lo salva sul server web: https://github.com/nusofthq/Recordmp3js

In recorder.js vedrete come il buffer audio è accessibile individualmente dai canali in questo modo:

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

Per una spiegazione più dettagliata della realizzazione si può leggere quanto segue blogpost: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/