Perekaman dan pengunggahan halaman web HTML5 ke server mendukung fungsi WeChat PC, Android, dan IOS

Saat bersiap membuat antarmuka obrolan berbasis web, Anda harus memiliki emotikon, gambar, dan file yang diunggah. Lupakan video, suara tetap diperlukan.

Artikel ini mencatat perekaman online dan pengunggahan ke server menggunakan Perekam di GitHub pada halaman web.

Kode contoh ini mendukung penggunaan di PC, Android, dan IOS (khusus Safari). Jika Anda menggunakan RecordApp, Anda dapat menambahkan dukungan untuk IOS (browser WeChat, applet).

Lebih baik bertindak sekali daripada membaca kode ribuan kali. Buat file HTML baru, salin tiga potong kode berikut ke dalam file, dan klik dua kali browser untuk membukanya untuk pengujian.

 <!-- Pertama-tama muat perpustakaan rekaman js. Catatan: Anda harus mengkloning js secara lokal untuk digunakan --><meta charset=utf-8 /><script src=https://xiangyuecn.github.io/Recorder/recorder. mp3.min.js></script><input type=button onclick=startRec() value=Mulai merekam><hr><input type=button onclick=playRec() value=Akhiri dan putar><input type=button onclick=uploadRec() value=Akhiri dan unggah><script>var rec;function startRec(){ rec=Recorder();//Gunakan konfigurasi default, format mp3//Buka Otorisasi mikrofon untuk mendapatkan sumber daya terkait rec.open(function(){ //Mulai merekam rec.start(); },function(msg,isUserNotAllow){ //Pengguna menolak izin atau browser tidak mendukung peringatan((isUserNotAllow? Pengguna menolak izin, :)+tidak dapat merekam:+pesan });};</script>

 <script>function uploadRec(){ //Hentikan perekaman dan dapatkan file rekaman objek biner blob. Anda dapat melakukan apa pun yang Anda inginkan rec.stop(function(blob,duration){ /* objek file blob, yang dapat dibaca dengan Konten FileReader, atau unggah menggunakan FormData. Dalam contoh ini, file biner diunggah secara langsung. Untuk unggahan formulir application/x-www-form-urlencoded biasa, lihat contoh di github*/ var form=new FormData(); form.append(upfile,blob,recorder.mp3); //Tidak ada bedanya dengan form form biasa. Backend menerima file dengan parameter upfile dan nama file adalah recorder.mp3 //Gunakan ajax untuk mengunggah secara langsung var xhr=XMLHttpRequest baru(); xhr.open(POST, http://baidu.com/, ubah ke alamat unggahan Anda);//Alamat palsu ini dapat melihat data dan format permintaan di jaringan konsol, hasil permintaan tidak relevan xhr.onreadystatechange=function ( ){ if(xhr.readyState==4){ alert(xhr.status==200?Upload berhasil: Untuk mengujinya, silakan buka konsol browser terlebih dahulu, lalu rekam lagi. Di tab jaringan, Anda dapat melihat unggahan meminta data dan diformat); xhr.send(form); },function(msg){ alert(perekaman gagal:+msg });};</script>

 <script>function playRec(){ //Hentikan perekaman, ambil file rekaman objek biner gumpalan, lakukan apa pun yang Anda inginkan rec.stop(function(blob,duration){ var audio=document.createElement(audio); audio.controls= true; document.body.appendChild(audio); //Sangat mudah untuk mendapatkan url audio blob audio.src=URL.createObjectURL(blob); },function(pesan){ peringatan(perekaman gagal:+pesan });};</script>

--------------------------------------------------- -----------------------------------

Alamat GitHub: https://github.com/xiangyuecn/Recorder

Tes online: Klik di sini untuk menguji

Perekam digunakan untuk merekam HTML5. Ini adalah perpustakaan js murni yang mendukung sebagian besar browser seluler dan PC yang telah mengimplementasikan getUserMedia, termasuk kernel Tencent Android X5 (QQ, WeChat).

Output rekaman dalam format mp3 secara default, dan format wav bersifat opsional (file rekaman dalam format ini sangat besar, dukungan terbatas untuk format ogg, webm, dan amr; dukungan untuk perluasan format apa pun (asalkan ada encoder yang sesuai). ).

Ringkas: Jika tidak ada persyaratan khusus untuk ukuran file rekaman, Anda cukup menggunakan inti rekaman + encoder wav. Kode sumber kurang dari 300 baris, dan recorder.wav.min.js terkompresi kurang dari 4kb. . MP3 dikodekan menggunakan lamejs, dan recorder.mp3.min.js terkompresi berukuran 54kb setelah gzip diaktifkan.

Karena hanya Safari yang mendukung getUserMedia di iOS (11. Browser, tampilan web program mini), dan RecordApp juga menyediakan dukungan yang lebih baik untuk Aplikasi Hibrid.

Karena RecordApp memerlukan akun publik (langganan) WeChat untuk menyediakan dukungan perekaman JsSDK, pengembangan akan lebih sulit, tetapi mendukung lebih banyak lingkungan. Perekam dapat langsung digunakan. Silakan lihat tabel di bawah untuk mengetahui mana yang akan digunakan:

* Anda dapat memeriksa kode sumber RecordApp di github, yang ada di direktori xiangyuecn/Recorder/app-support-sample .

Di atas adalah halaman web HTML5 yang direkam dan diunggah ke server yang diperkenalkan oleh editor. Ini mendukung fungsi WeChat PC, Android, dan IOS. Saya harap ini dapat membantu Anda editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!