Yang akhirnya ingin saya lakukan adalah merekam dari mikrofon pengguna, dan mengunggah file ke server setelah selesai. Sejauh ini, saya telah berhasil melakukan streaming ke elemen dengan kode berikut:
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);
}
Bagaimana saya beralih dari itu, ke merekam ke file?
javascript
html
html5-audio
audio-recording
Fibericon
sumber
sumber
Jawaban:
Demo rekaman yang cukup lengkap tersedia di: http://webaudiodemos.appspot.com/AudioRecorder/index.html
Ini memungkinkan Anda untuk merekam audio di browser, kemudian memberi Anda opsi untuk mengekspor dan mengunduh apa yang telah Anda rekam.
Anda dapat melihat sumber halaman itu untuk menemukan tautan ke javascript, tetapi untuk meringkas, ada
Recorder
objek yang berisiexportWAV
metode, danforceDownload
metode.sumber
Kode yang ditunjukkan di bawah ini adalah hak cipta Matt Diamond dan tersedia untuk digunakan di bawah lisensi MIT. File aslinya ada di sini:
Simpan file ini dan gunakan
sumber
Perbarui sekarang Chrome juga mendukung MediaRecorder API dari v47. Hal yang sama untuk dilakukan adalah menggunakannya (menebak metode perekaman asli pasti lebih cepat daripada bekerja sebelumnya), API sangat mudah digunakan, dan Anda akan menemukan banyak jawaban tentang cara mengunggah gumpalan untuk server .
Demo - akan berfungsi di Chrome dan Firefox, sengaja tidak memasukkan blob ke server ...
Sumber Kode
Saat ini, ada tiga cara untuk melakukannya:wav
[semua kode sisi klien, rekaman tidak terkompresi], Anda dapat memeriksa -> Recorderjs . Masalah: ukuran file cukup besar, bandwidth upload lebih banyak.mp3
[semua kode sisi klien, rekaman terkompresi], Anda dapat memeriksa -> mp3Recorder . Masalah: secara pribadi, saya menemukan kualitasnya buruk, juga ada masalah perizinan ini.sebagai kode
ogg
[klien + server (node.js
), perekaman terkompresi, jam perekaman tak terbatas tanpa crash browser], Anda dapat memeriksa -> recordOpus , baik hanya perekaman sisi klien, atau bundling klien-server, pilihan ada di tangan Anda.contoh rekaman ogg (hanya firefox):
Demo Fiddle untuk merekam ogg.sumber
Ini adalah perekam dan editor suara JavaScript sederhana. Kamu bisa mencobanya.
https://www.danieldemmel.me/JSSoundRecorder/
Bisa download dari sini
https://github.com/daaain/JSSoundRecorder
sumber
Inilah proyek gitHub yang melakukan hal itu.
Ini merekam audio dari browser dalam format mp3, dan secara otomatis menyimpannya ke server web. https://github.com/Audior/Recordmp3js
Anda juga dapat melihat penjelasan rinci tentang penerapannya: http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
sumber
Anda dapat menggunakan Recordmp3js dari GitHub untuk memenuhi kebutuhan Anda. Anda dapat merekam dari mikrofon pengguna dan kemudian mendapatkan file sebagai mp3. Terakhir unggah ke server Anda.
Saya menggunakan ini di demo saya. Sudah ada sampel yang tersedia dengan kode sumber oleh penulis di lokasi ini: https://github.com/Audior/Recordmp3js
Demo ada di sini: http://audior.ec/recordmp3js/
Namun saat ini hanya berfungsi di Chrome dan Firefox.
Tampaknya berfungsi dengan baik dan cukup sederhana. Semoga ini membantu.
sumber
getUserMedia()
hanya berfungsi pada asal yang aman (https, localhost) sejak Chrome 47Streaming audio secara realtime tanpa menunggu rekaman berakhir: https://github.com/noamtcohen/AudioStreamer
Ini mengalirkan data PCM tetapi Anda dapat mengubah kode untuk mengalirkan mp3 atau Speex
sumber