Ostatecznie chcę nagrać z mikrofonu użytkownika i przesłać plik na serwer, gdy skończą. Do tej pory udało mi się stworzyć strumień do elementu o następującym kodzie:
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);
}
Jak mam przejść od tego do nagrywania do pliku?
javascript
html
html5-audio
audio-recording
Fibericon
źródło
źródło
Odpowiedzi:
Dość kompletne demo nagrania jest dostępne pod adresem : http://webaudiodemos.appspot.com/AudioRecorder/index.html
Umożliwia nagrywanie dźwięku w przeglądarce, a następnie daje możliwość eksportowania i pobierania tego, co nagrałeś.
Możesz wyświetlić źródło tej strony, aby znaleźć linki do javascript, ale podsumowując, istnieje
Recorder
obiekt, który zawieraexportWAV
metodę iforceDownload
metodę.źródło
Kod pokazany poniżej jest chroniony prawem autorskim Matt Diamond i jest dostępny do użytku na licencji MIT. Oryginalne pliki są tutaj:
Zapisz te pliki i użyj
źródło
Aktualizuj teraz Chrome obsługuje również MediaRecorder API od V47. To samo, co można by zrobić, to użyć go (domyślając się, że natywna metoda nagrywania z pewnością będzie szybsza niż obejście), interfejs API jest naprawdę łatwy w użyciu i można znaleźć mnóstwo odpowiedzi, jak przesłać obiekt blob na serwer .
Demo - działałoby w Chrome i Firefox, celowo pomijając wypychanie obiektu blob na serwer ...
Źródło kodu
Obecnie można to zrobić na trzy sposoby:wav
[cały kod po stronie klienta, nieskompresowane nagranie], możesz sprawdzić -> Recorderjs . Problem: rozmiar pliku jest dość duży, wymagana jest większa przepustowość przesyłania.mp3
[cały kod po stronie klienta, skompresowane nagranie], możesz sprawdzić -> mp3Recorder . Problem: osobiście uważam, że jakość jest zła, jest też problem z licencją.jako kod
ogg
[klient + serwer (node.js
), skompresowane nagranie, nieskończone godziny nagrywania bez awarii przeglądarki], możesz sprawdzić -> recordOpus , albo tylko nagrywanie po stronie klienta, albo pakowanie klient-serwer, wybór należy do Ciebie.przykład nagrania ogg (tylko firefox):
Fiddle Demo do nagrywania ogg.źródło
To prosty rejestrator i edytor dźwięku JavaScript. Możesz tego spróbować.
https://www.danieldemmel.me/JSSoundRecorder/
Można pobrać stąd
https://github.com/daaain/JSSoundRecorder
źródło
Oto projekt gitHub, który właśnie to robi.
Nagrywa dźwięk z przeglądarki w formacie mp3 i automatycznie zapisuje go na serwerze internetowym. https://github.com/Audior/Recordmp3js
Możesz również wyświetlić szczegółowe wyjaśnienie implementacji: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
źródło
Możesz użyć Recordmp3js z GitHub, aby spełnić swoje wymagania. Możesz nagrywać z mikrofonu użytkownika, a następnie pobrać plik jako mp3. Na koniec prześlij go na swój serwer.
Użyłem tego w moim demo. W tej lokalizacji dostępna jest już próbka z kodem źródłowym autora: https://github.com/Audior/Recordmp3js
Demo jest tutaj: http://audior.ec/recordmp3js/
Ale obecnie działa tylko w Chrome i Firefox.
Wydaje się, że działa dobrze i całkiem prosto. Mam nadzieję że to pomoże.
źródło
getUserMedia()
działa tylko na bezpiecznych źródłach (https, localhost) od Chrome 47Przesyłaj strumieniowo dźwięk w czasie rzeczywistym bez czekania na zakończenie nagrywania: https://github.com/noamtcohen/AudioStreamer
Powoduje to przesyłanie danych PCM, ale można zmodyfikować kod, aby przesyłać strumieniowo pliki mp3 lub Speex
źródło