2013-05-29 10 views
13

Quindi ho questo progetto HTML5 su cui sto lavorando, dove sto convertendo un'app iOS in una basata sul Web. La parte che accompagna la creazione del contenuto dell'app è una registrazione audio, che sto cercando di replicare in JavaScript senza l'uso di plug-in; finora, sono stato in grado di registrare l'audio da getUserMedia() e trasformarlo in un file WAV grazie a Recorder.js.Codifica audio da getUserMedia() a un file .OGG in JavaScript

Ora, tuttavia, sono un po 'perso. Al momento dispongo di due viste separate, una per la registrazione del contenuto e una per la riproduzione, ma non so come ottenere l'audio esportato da Recorder.js nel payload JSON per la riproduzione (vorrei evitare di forzare un server upload o download del client).

Quindi suppongo che la mia domanda specifica sia: come faccio a prendere l'oggetto blob (qualcosa di cui so quasi nulla) creato da Recorder.js e trasformarlo in entrambi i dati grezzi, o in qualche modo inviare il file tramite JSON?

UPDATE: ho deciso di provare a utilizzare lo strumento speex.js (https://github.com/jpemartins/speex.js) per codificare un .OGG (molto più piccolo di un .WAV). Tuttavia, non sono davvero sicuro di come usarlo; la pagina demo non sembra funzionare per me, e il tentativo di chiamare la funzione .encode() di un oggetto Speex non sembra codificare effettivamente i dati, ottengo solo zeri nei campi dell'oggetto. Qualcuno sa di risorse in cui posso imparare a usare questo tipo di strumento?

+0

Attualmente sto provando a impostare qualcosa con getUsetMedia e ho provato diversi tutorial, ma continuo a trovarlo piuttosto difficile a volte. Cosa intendi per payload JSON per la riproduzione? Hai un tag '

+0

E se vuoi convertire un Blob in testo, puoi dare un'occhiata al [FileReader] (https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug = DOM% 2FFileReader # readAsText% 28% 29) oggetto. I metodi di questo prendono un Blob come argomento e lo "convertono" in testo, credo. Ma non sono sicuro di come usarlo esattamente o se fa anche quello che penso che faccia. Non ho avuto la possibilità di dare un'occhiata più da vicino ancora. – basilikum

+0

Grazie, stavo guardando FileReader. Quello che intendevo per "dati grezzi" erano i dati effettivi contenuti nel file .WAV esportato dal registratore; dal momento che questo dovrebbe essere in grado di essere inviato tra un iPad e un browser, essere in grado di inviare un file .WAV sarebbe molto utile. Il problema che sto avendo è che non so come inviare i dati effettivi del file .WAV, perché ho solo un oggetto blob con un tipo e una lunghezza, nessun dato apparente. – twchapman

risposta

0

Esiste una libreria (con licenza MIT) che dovrebbe funzionare, credo di aver visto questa libreria esatto utilizzata per salvare file ogg da uno stream audio getUserMedia su un sito Web non molto tempo fa. Ricordavo vagamente il nome della libreria, ma credo che questo è quello:

https://github.com/streamproc/MediaStreamRecorder/blob/master/AudioStreamRecorder/MediaRecorder.js

L'intero progetto su GitHub: https://github.com/streamproc/MediaStreamRecorder/

Poiché sembra così difficile da raggiungere questo obiettivo, potrebbe almeno essere vale la pena dare un'occhiata per capire i concetti - ma direi che è un javascript piuttosto avanzato che stiamo trattando qui ...

+1

In realtà questa lib non codifica il file Ogg, justs registra l'onda e usa il tipo di mimo 0gg. Per codificare il file ogg, la soluzione migliore è usare https://www.webrtc-experiment.com/ffmpeg/wav-to-ogg.html – Lelis718