Aplikasi Web saat ini kemampuannya sudah sangat powerfull. Beberapa fungsi pada aplikasi mobile Native sudah dapat dijalankan pada browser, dengan dukungan HTML5 API dan JavaScript. Tentunya juga dengan dukungan browser terbaru.
Pada artikel ini, saya akan membuat contoh bagaimana cara merekam suara / audio menggunakan HTML5 API dan JavaScript.
Berikut contoh kodenya
<!DOCTYPE html> <html> <head> <title>Audio Recorder</title> </head> <body> <button id="recordButton">Start Recording</button> <audio id="audioPlayer" controls></audio> <script> const recordButton = document.getElementById('recordButton'); const audioPlayer = document.getElementById('audioPlayer'); let mediaRecorder; let recordedBlobs; recordButton.addEventListener('click', () => { if (mediaRecorder) { mediaRecorder.stop(); recordButton.textContent = 'Start Recording'; } else { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { mediaRecorder = new MediaRecorder(stream); recordedBlobs = []; mediaRecorder.ondataavailable = event => { recordedBlobs.push(event.data); }; mediaRecorder.onstop = () => { const blob = new Blob(recordedBlobs, { type: 'audio/wav' }); const audioURL = URL.createObjectURL(blob); audioPlayer.src = audioURL; // Convert the blob to MP3 and upload it to the server convertToMP3AndUpload(blob); }; mediaRecorder.start(); recordButton.textContent = 'Stop Recording'; }) .catch(error => { console.error('Error accessing microphone:', error); }); } }); function convertToMP3AndUpload(blob) { // Use a library like lamejs or a server-side script to convert the WAV blob to MP3 // ... (conversion logic) // Create a FormData object to send the MP3 file const formData = new FormData(); formData.append('audio', new File([blob], 'audio.mp3', { type: 'audio/mpeg' })); // Send the FormData to the server using fetch or XMLHttpRequest fetch('/upload-audio', { method: 'POST', body: formData }) .then(response => { if (response.ok) { console.log('Audio uploaded successfully!'); } else { console.error('Error uploading audio:', response.statusText); } }) .catch(error => { console.error('Error uploading audio:', error); }); } </script> </body> </html>
Kode diatas akan menghasilkan preview berikut

Selamat mencoba 🙂