Nagrywanie html5 audio

Question

Czy jest możliwe nagrywanie dźwięku z html5? Pobrałem najnowszą kanarkową wersję chrome i używam następującego kodu:

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

Spowoduje to monitowanie użytkownika o zezwolenie na nagrywanie dźwięku, a jeśli powiesz "tak", pojawi się komunikat informujący, że chrom jest nagrywany. Czy jest jednak możliwy dostęp do bufora audio z danymi pierwotnymi? Wydaje mi się, że nie jestem w stanie dowiedzieć się, jak to zrobić. Istnieją sugerowane specyfikacje, które nie zostały jeszcze zaimplementowane, czy ktoś wie, czy rzeczywiście można to zrobić w dowolnej przeglądarce i czy dostarcza instrukcje?

Answer 1

Tutaj można znaleźć mój przykład, ale nie działa (częściowo). Ponieważ nagrywanie AUDIO nie zostało jeszcze zaimplementowane do chrome. Właśnie dlatego dostaniesz błąd 404, który mówi, że nie może znaleźć BLOBa.

Istnieje również formularz poniżej, ponieważ moim celem było wysłanie tego BLOBa do pliku php, ale ponieważ nie działa, nie mogę spróbować. Zapisz, możesz użyć później.

<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> 

uwaga: niektóre informacje i howto dla Firefox: https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

Answer 2

Obsługa nagrywania Webkit i interfejsu API Chrome audio API, jednak wraz z ewolucją ich API trudno będzie utrzymać kod, który z nich korzysta.

Aktywny projekt open source o nazwie Sink.js umożliwia nagrywanie, a także umożliwia przesyłanie próbek surowych: https://github.com/jussi-kalliokoski/sink.js/. Ponieważ projekt jest dość aktywny, byli oni w stanie śledzić zmiany w Webkit i Chrome, kiedy się pojawią.

Answer 3

Teraz jest to możliwe, aby uzyskać dostęp do bufora dźwięku przy użyciu API audio kontekstowe i getChannelData().

Oto projekt na github, który rejestruje dźwięk bezpośrednio w formacie MP3 i zapisuje je na serwerze internetowym: https://github.com/nusofthq/Recordmp3js

W recorder.js widać jak bufor audio jest dostępna indywidualnie przez kanały tak:

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

celu bardziej szczegółowego wyjaśnienia realizacji można przeczytać następujące blogpost: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/