Spaces:

NeoPy
/

audio-recorder

Running

App Files Files Community

NeoPy commited on May 14

Commit

26b46c4

verified ·

1 Parent(s): 03e2aca

Add 2 files

Browse files

Files changed (2) hide show

index.html +257 -5
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Online Audio Recorder</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
@@ -60,18 +60,73 @@
         .format-option {
             transition: all 0.3s ease;
         }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
         <div class="max-w-3xl mx-auto">
             <div class="text-center mb-8">
-                <h1 class="text-4xl font-bold text-gray-800 mb-2">Online Audio Recorder</h1>
-                <p class="text-gray-600">Record, play and download high-quality audio in multiple formats</p>
             </div>
             <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                 <div class="p-6">
                     <div class="waveform mb-6" id="waveform"></div>
                     <div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-6">
@@ -147,6 +202,12 @@
             let audioElement;
             let timerInterval;
             let seconds = 0;
             // DOM elements
             const recordBtn = document.getElementById('recordBtn');
@@ -156,9 +217,24 @@
             const timer = document.getElementById('timer');
             const recordingsList = document.getElementById('recordingsList');
             const formatOptions = document.querySelectorAll('.format-option');
             let selectedFormat = 'wav'; // Default format
             // Format selection
             formatOptions.forEach(option => {
                 option.addEventListener('click', function() {
@@ -171,10 +247,180 @@
             // Set first format as selected by default
             formatOptions[0].classList.add('ring-2', 'ring-indigo-500');
             // Request permission to use microphone
             recordBtn.addEventListener('click', async function() {
                 try {
-                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                     mediaRecorder = new MediaRecorder(stream);
                     audioChunks = [];
@@ -196,6 +442,11 @@
                         // Add to recordings list
                         addRecordingToList(audioUrl);
                     };
                     mediaRecorder.start(10); // Collect data every 10ms
@@ -229,7 +480,7 @@
                     mediaRecorder.stop();
                     // Stop all tracks in the stream
-                    mediaRecorder.stream.getTracks().forEach(track => track.stop());
                     // Clear timer
                     clearInterval(timerInterval);
@@ -301,6 +552,7 @@
                         <div>
                             <p class="font-medium">Recording ${recordingsList.children.length + 1}</p>
                             <p class="text-sm text-gray-500">${new Date().toLocaleString()}</p>
                         </div>
                     </div>
                     <div class="flex gap-2">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced Audio Recorder</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         .format-option {
             transition: all 0.3s ease;
         }
+        .device-option:hover {
+            background-color: #f3f4f6;
+        }
+        .device-option {
+            transition: all 0.2s ease;
+        }
+        .visualizer {
+            width: 100%;
+            height: 80px;
+            background-color: #f3f4f6;
+            border-radius: 0.5rem;
+            position: relative;
+            overflow: hidden;
+        }
+        .bar {
+            position: absolute;
+            bottom: 0;
+            width: 8px;
+            background-color: #3b82f6;
+            border-radius: 4px 4px 0 0;
+            transition: height 0.1s ease;
+        }
     </style>
 </head>
 <body class="bg-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-8">
         <div class="max-w-3xl mx-auto">
             <div class="text-center mb-8">
+                <h1 class="text-4xl font-bold text-gray-800 mb-2">Advanced Audio Recorder</h1>
+                <p class="text-gray-600">Select your input device, record, and download in multiple formats</p>
             </div>
             <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
                 <div class="p-6">
+                    <!-- Device Selection Section -->
+                    <div class="mb-6">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-3">Select Input Device</h3>
+                        <div class="flex flex-col sm:flex-row gap-4 mb-4">
+                            <div class="flex-1">
+                                <label for="audioSource" class="block text-sm font-medium text-gray-700 mb-1">Audio Input</label>
+                                <select id="audioSource" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
+                                    <option value="">Default</option>
+                                </select>
+                            </div>
+                            <div class="flex-1">
+                                <label for="audioQuality" class="block text-sm font-medium text-gray-700 mb-1">Quality</label>
+                                <select id="audioQuality" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 py-2 px-3 border">
+                                    <option value="high">High (CD Quality)</option>
+                                    <option value="medium" selected>Medium (Good Quality)</option>
+                                    <option value="low">Low (Voice Only)</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="visualizer mb-4" id="visualizer">
+                            <!-- Audio bars will be inserted here by JavaScript -->
+                        </div>
+                        <div class="text-center text-sm text-gray-500" id="deviceStatus">
+                            <i class="fas fa-microphone-slash mr-1"></i> No device selected
+                        </div>
+                    </div>
                     <div class="waveform mb-6" id="waveform"></div>
                     <div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-6">
             let audioElement;
             let timerInterval;
             let seconds = 0;
+            let audioContext;
+            let analyser;
+            let microphone;
+            let dataArray;
+            let animationId;
+            let currentStream;
             // DOM elements
             const recordBtn = document.getElementById('recordBtn');
             const timer = document.getElementById('timer');
             const recordingsList = document.getElementById('recordingsList');
             const formatOptions = document.querySelectorAll('.format-option');
+            const audioSourceSelect = document.getElementById('audioSource');
+            const audioQualitySelect = document.getElementById('audioQuality');
+            const visualizer = document.getElementById('visualizer');
+            const deviceStatus = document.getElementById('deviceStatus');
             let selectedFormat = 'wav'; // Default format
+            // Create audio bars for visualizer
+            const barCount = 40;
+            for (let i = 0; i < barCount; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                bar.style.left = `${i * (100 / barCount)}%`;
+                bar.style.height = '0%';
+                visualizer.appendChild(bar);
+            }
+            const bars = document.querySelectorAll('.bar');
             // Format selection
             formatOptions.forEach(option => {
                 option.addEventListener('click', function() {
             // Set first format as selected by default
             formatOptions[0].classList.add('ring-2', 'ring-indigo-500');
+            // Get available audio devices
+            async function getAudioDevices() {
+                try {
+                    // First get permission by accessing media
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    stopStream(stream); // We don't need this stream, just needed for permission
+                    // Now enumerate devices
+                    const devices = await navigator.mediaDevices.enumerateDevices();
+                    const audioInputs = devices.filter(device => device.kind === 'audioinput');
+                    // Clear existing options
+                    audioSourceSelect.innerHTML = '<option value="">Default</option>';
+                    // Add each audio input device as an option
+                    audioInputs.forEach(device => {
+                        const option = document.createElement('option');
+                        option.value = device.deviceId;
+                        option.text = device.label || `Microphone ${audioSourceSelect.length}`;
+                        audioSourceSelect.appendChild(option);
+                    });
+                    return true;
+                } catch (error) {
+                    console.error('Error getting audio devices:', error);
+                    deviceStatus.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Could not access microphone devices';
+                    return false;
+                }
+            }
+            // Stop a media stream
+            function stopStream(stream) {
+                if (stream) {
+                    stream.getTracks().forEach(track => track.stop());
+                }
+            }
+            // Visualize audio input
+            function visualizeAudio(stream) {
+                // Create audio context if it doesn't exist
+                if (!audioContext) {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                }
+                // Create analyser node
+                analyser = audioContext.createAnalyser();
+                analyser.fftSize = 256;
+                // Create microphone source
+                microphone = audioContext.createMediaStreamSource(stream);
+                microphone.connect(analyser);
+                // Create data array for analysis
+                const bufferLength = analyser.frequencyBinCount;
+                dataArray = new Uint8Array(bufferLength);
+                // Start animation loop
+                function animate() {
+                    animationId = requestAnimationFrame(animate);
+                    analyser.getByteFrequencyData(dataArray);
+                    // Update bars
+                    for (let i = 0; i < bars.length; i++) {
+                        // Scale the index to cover the full frequency range
+                        const scaledIndex = Math.floor(i * (bufferLength / bars.length));
+                        const value = dataArray[scaledIndex];
+                        const height = value / 2.55; // Convert 0-255 to 0-100
+                        bars[i].style.height = `${height}%`;
+                        bars[i].style.backgroundColor = `hsl(${200 + (height * 1.5)}, 100%, 50%)`;
+                    }
+                }
+                // Start animation
+                animate();
+                // Update device status
+                deviceStatus.innerHTML = `<i class="fas fa-microphone mr-1"></i> ${audioSourceSelect.options[audioSourceSelect.selectedIndex].text}`;
+            }
+            // Stop visualization
+            function stopVisualization() {
+                if (animationId) {
+                    cancelAnimationFrame(animationId);
+                    animationId = null;
+                }
+                // Reset bars
+                bars.forEach(bar => {
+                    bar.style.height = '0%';
+                    bar.style.backgroundColor = '#3b82f6';
+                });
+                // Update device status
+                deviceStatus.innerHTML = '<i class="fas fa-microphone-slash mr-1"></i> No active input';
+            }
+            // Get audio constraints based on selected quality
+            function getAudioConstraints() {
+                const deviceId = audioSourceSelect.value;
+                const quality = audioQualitySelect.value;
+                let constraints = {
+                    audio: {
+                        deviceId: deviceId ? { exact: deviceId } : undefined,
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                        autoGainControl: true
+                    }
+                };
+                // Adjust constraints based on quality
+                if (quality === 'high') {
+                    constraints.audio.sampleRate = 48000;
+                    constraints.audio.channelCount = 2;
+                    constraints.audio.sampleSize = 16;
+                    constraints.audio.bitrate = 256000;
+                } else if (quality === 'medium') {
+                    constraints.audio.sampleRate = 44100;
+                    constraints.audio.channelCount = 1;
+                    constraints.audio.sampleSize = 16;
+                    constraints.audio.bitrate = 128000;
+                } else { // low
+                    constraints.audio.sampleRate = 22050;
+                    constraints.audio.channelCount = 1;
+                    constraints.audio.sampleSize = 8;
+                    constraints.audio.bitrate = 64000;
+                }
+                return constraints;
+            }
+            // Initialize device selection
+            getAudioDevices().then(success => {
+                if (success) {
+                    // When device selection changes, update the visualization
+                    audioSourceSelect.addEventListener('change', async function() {
+                        // Stop any existing visualization
+                        stopVisualization();
+                        if (currentStream) {
+                            stopStream(currentStream);
+                        }
+                        // If a device is selected, start visualization
+                        if (this.value) {
+                            try {
+                                const constraints = getAudioConstraints();
+                                currentStream = await navigator.mediaDevices.getUserMedia(constraints);
+                                visualizeAudio(currentStream);
+                            } catch (error) {
+                                console.error('Error accessing selected device:', error);
+                                deviceStatus.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Could not access selected device';
+                            }
+                        }
+                    });
+                    // Also update when quality changes
+                    audioQualitySelect.addEventListener('change', function() {
+                        if (audioSourceSelect.value) {
+                            // Trigger change event to restart with new quality
+                            audioSourceSelect.dispatchEvent(new Event('change'));
+                        }
+                    });
+                }
+            });
             // Request permission to use microphone
             recordBtn.addEventListener('click', async function() {
                 try {
+                    const constraints = getAudioConstraints();
+                    const stream = await navigator.mediaDevices.getUserMedia(constraints);
+                    currentStream = stream;
+                    // Stop visualization if it's running
+                    stopVisualization();
                     mediaRecorder = new MediaRecorder(stream);
                     audioChunks = [];
                         // Add to recordings list
                         addRecordingToList(audioUrl);
+                        // Restart visualization if a device was selected
+                        if (audioSourceSelect.value) {
+                            visualizeAudio(currentStream);
+                        }
                     };
                     mediaRecorder.start(10); // Collect data every 10ms
                     mediaRecorder.stop();
                     // Stop all tracks in the stream
+                    stopStream(currentStream);
                     // Clear timer
                     clearInterval(timerInterval);
                         <div>
                             <p class="font-medium">Recording ${recordingsList.children.length + 1}</p>
                             <p class="text-sm text-gray-500">${new Date().toLocaleString()}</p>
+                            <p class="text-xs text-gray-400">${audioSourceSelect.options[audioSourceSelect.selectedIndex].text}</p>
                         </div>
                     </div>
                     <div class="flex gap-2">

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- website to record audio online and can download the result audio on any audio format


1	+ website to record audio online and can download the result audio on any audio format
2	+ now make it to user can select mix input from any device, like headset, mic etc