Merekam suara JS dari mikrofon atau komentar suara
Belum lama ini, ketika mengembangkan satu aplikasi web perusahaan, pelanggan ingin dapat meninggalkan komentar suara. Sebelumnya, saya tidak datang untuk menemukan konten media dan saya mulai mempelajari topik ini dengan penuh minat.
Jaringan menyediakan informasi latar belakang yang cukup tentang topik membuat dan memproses konten semacam ini, tetapi saya tidak menemukan contoh sederhana yang berfungsi penuh. Setelah pelaksanaan tugas oleh pelanggan, saya memutuskan untuk menerbitkan contoh paling sederhana untuk merekam dan menyimpan komentar suara dan menulis artikel. Mungkin materi ini akan bermanfaat bagi seseorang dan membantu dalam penelitian.
Pernyataan masalah
Kami mengatur sendiri tugas mengembangkan aplikasi mini yang berjalan di browser yang akan memungkinkan Anda merekam komentar suara, mengirim rekaman ke server, server akan menyimpan rekaman, jika berhasil, itu akan mengembalikan respons dengan nama file yang dibuat dan menampilkan objek pada halaman sehingga rekaman dapat didengarkan.
Rekam suara di browser
Rekaman suara diputuskan untuk diimplementasikan menggunakan API web MediaStream Recording. Untuk merekam, kami menggunakan antarmuka MediaRecorder (). Tapi pertama-tama, buat antarmuka. Biarkan kami memiliki index.html yang hanya berisi tag paling dasar, dan di dalam tubuh tag kami akan menyertakan file dengan JavaScript voice.js mendatang:
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Voice comments</title> </head> <body> <script src="voice.js"></script> </body> </html>
Buat file voice.js, tentukan URL konstan di dalamnya yang akan berisi tautan ke skrip yang menerima rekaman suara. Selanjutnya, buat tombol Start dan Stop untuk memulai dan menghentikan rekaman suara, serta blok div di mana catatan yang disimpan akan ditampilkan. Pada antarmuka kami siap, Anda dapat melanjutkan langsung ke rekaman suara.
Seperti yang telah disebutkan untuk merekam, kita akan menggunakan antarmuka MediaRecorder () (untuk informasi lebih lanjut tentang antarmuka, lihat dokumentasi), untuk operasinya perlu menentukan aliran media dari mana kita akan mengambil suara, inisialisasi hanya bahwa kita hanya memerlukan trek audio.
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream)});
Sekarang kami memiliki mediaRecorder konstan, yang berisi instance dari antarmuka, dan kami akan terus bekerja dengannya.
Untuk mulai merekam, kita perlu memanggil metode MediaRecorder.start (), untuk berhenti merekam, metode MediaRecorder.stop (). Dalam hal ini, MediaRecorder.stop () menghasilkan peristiwa yang tersedia data di mana kami mendapatkan akses ke rekaman suara digital dalam bentuk array biner.
Maka kami akan menjelaskan peristiwa di atas, mendeklarasikan array suara [] dan menulis data yang diterima ke dalamnya:
navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let voice = []; document.querySelector('#start').addEventListener('click', function(){ mediaRecorder.start(); }); mediaRecorder.addEventListener("dataavailable",function(event) { voice.push(event.data); }); document.querySelector('#stop').addEventListener('click', function(){ mediaRecorder.stop(); }); });
Sekarang kami akan menyiapkan data yang diterima untuk dikirim. Untuk melakukan ini, dengan menghentikan acara, buat instance BLOB, masukkan data yang diterima ke dalamnya dan tentukan tipe data MIME. Dalam kasus kami, itu akan menjadi audio / wav.
mediaRecorder.addEventListener("stop", function() { const voiceBlob = new Blob(voice, { type: 'audio/wav' });
Akibatnya, kami memiliki konstanta voiceBlob yang merupakan konten dari file wav masa depan kami dengan merekam pesan suara.
Mengirim catatan ke server
Untuk mengirim catatan ke server, saya memutuskan untuk menggunakan metode fetch (). Karena metode ini adalah yang paling modern dan menyediakan antarmuka yang ditingkatkan untuk membuat permintaan ke server. Sebagai bagian dari tugas kami, kami perlu menginisiasi permintaan POST untuk mengirim isi file masa depan kami untuk disimpan di server (bagaimana metode fetch () bekerja dan kemampuan apa yang dapat ditemukan dalam dokumentasi secara rinci). Buat formulir baru dengan bidang suara dan masukkan konten catatan kami ke dalamnya.
let fd = new FormData(); fd.append('voice', voiceBlob);
Kami membuat fungsi asinkron untuk mengirim pesan ke server untuk menerima respons dan menampilkan objek audio untuk memutar file yang sudah disimpan. Sebagai argumen, fungsi akan mengambil bentuk yang dibuat di atas.
Kami memulai permintaan server:
let promise = await fetch(URL, { method: 'POST', body: form});
Jika respons HTTP dari server tidak mengandung kode kesalahan (kode respons berada dalam kisaran 200-299), maka tetap bagi kami untuk menguraikan kode respons, membuat objek audio baru pada halaman, menentukan propertinya dan menampilkannya. Bagaimana jawabannya terbentuk akan dibahas di bawah ini.
Menyimpan file di server
Mari kita buat skrip di server yang akan menerima permintaan POST kami dengan pesan suara. Karena rekaman suara yang kami kirim pada dasarnya sudah berupa file dalam bentuk, kami akan menerimanya di server sesuai:
$uploadDir = 'voice/'; $typeFile = explode('/', $_FILES['voice']['type']); $uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]); if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) { $response = ['result'=>'OK', 'data'=>'../'.$uploadFile]; } else { $response = ['result'=>'ERROR', 'data'=>'']; } echo json_encode($response);
Anda dapat menemukan banyak contoh kode PHP yang mirip, memproses file yang diterima di jaringan. Pertama, inisialisasi variabel, $ uploadDir - direktori di mana file yang diterima akan disimpan, jenis file & typeFile dalam kasus kami akan sama dengan wav dan nama lengkap file, termasuk direktori. Nama file dalam hal ini dibentuk dengan menggabungkan nama file "sementara" dan nilai string dari waktu saat ini dienkripsi menggunakan metode md5. Jika Anda berhasil menyimpan file dengan pesan suara di direktori yang ditentukan, kami membentuk respons dalam bentuk array yang berisi bidang hasil sama dengan "OK" atau "ERROR" tergantung pada hasil dan bidang "data" yang, jika berhasil diproses, berisi tautan ke file yang disimpan.
Untuk kenyamanan, kami mengubah array menjadi objek JSON dan mengirimkannya sebagai respons.
Kode sampel lengkap tersedia di
GitHub .
PS Browser memungkinkan Anda untuk merekam konten media hanya dengan koneksi HTTPS yang aman.