Audio Recorder Tool

Sure, here's an example of an audio recorder tool written in HTML and JavaScript that you can use: HTML Code: php Copy code

Format: start recording to see sample rate

Recordings

JS Code (using recorder.js library): javascript Copy code // Initialize variables let startButton, stopButton; let mediaRecorder; let chunks = []; let recordingsList = document.getElementById("recordingsList"); // Check if browser supports MediaRecorder API if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { console.log('MediaRecorder supported!'); startButton = document.getElementById('recordButton'); stopButton = document.getElementById('stopButton'); startButton.disabled = false; // Get audio stream from user's microphone const constraints = { audio: true }; let chunks = []; // Handle start button click event startButton.addEventListener('click', function() { startRecording(); }); // Handle stop button click event stopButton.addEventListener('click', function() { stopRecording(); startButton.disabled = false; stopButton.disabled = true; }); // Start recording function function startRecording() { let options = {mimeType: 'audio/webm'}; mediaRecorder = new MediaRecorder(window.stream, options); mediaRecorder.addEventListener('dataavailable', function(e) { chunks.push(e.data); }); mediaRecorder.addEventListener('stop', function() { let blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; let audioURL = window.URL.createObjectURL(blob); let li = document.createElement('li'); let au = document.createElement('audio'); let hf = document.createElement('a'); au.controls = true; au.src = audioURL; hf.href = audioURL; hf.download = new Date().toISOString() + '.ogg'; hf.innerHTML = hf.download; li.appendChild(au); li.appendChild(hf); recordingsList.appendChild(li); }); mediaRecorder.start(); startButton.disabled = true; stopButton.disabled = false; } // Stop recording function function stopRecording() { mediaRecorder.stop(); } // Get audio stream from user's microphone navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { window.stream = stream; }) .catch(function(err) { console.log('Error: ' + err); }); } else { console.log('MediaRecorder not supported on your browser!'); } Explanation: The HTML code contains a basic layout with two buttons (Record and Stop), a list to display recordings, and a script tag that references a JavaScript file called recorder.js. The JavaScript code first checks if the browser supports the MediaRecorder API. If it does, it initializes variables for the start and stop buttons, the MediaRecorder object, and an array to store the recorded audio chunks. Next, it sets up event listeners for the start and stop buttons. When the start button is