Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +359 -19
- prompts.txt +1 -0
README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1 |
---
|
2 |
-
title:
|
3 |
-
emoji:
|
4 |
-
colorFrom:
|
5 |
-
colorTo:
|
6 |
sdk: static
|
7 |
pinned: false
|
|
|
|
|
8 |
---
|
9 |
|
10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
1 |
---
|
2 |
+
title: audio-recorder
|
3 |
+
emoji: 🐳
|
4 |
+
colorFrom: blue
|
5 |
+
colorTo: gray
|
6 |
sdk: static
|
7 |
pinned: false
|
8 |
+
tags:
|
9 |
+
- deepsite
|
10 |
---
|
11 |
|
12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
@@ -1,19 +1,359 @@
|
|
1 |
-
<!
|
2 |
-
<html>
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
-
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html lang="en">
|
3 |
+
<head>
|
4 |
+
<meta charset="UTF-8">
|
5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
6 |
+
<title>Online Audio Recorder</title>
|
7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
9 |
+
<style>
|
10 |
+
.waveform {
|
11 |
+
background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
|
12 |
+
height: 100px;
|
13 |
+
border-radius: 0.5rem;
|
14 |
+
position: relative;
|
15 |
+
overflow: hidden;
|
16 |
+
}
|
17 |
+
|
18 |
+
.waveform::after {
|
19 |
+
content: '';
|
20 |
+
position: absolute;
|
21 |
+
top: 0;
|
22 |
+
left: 0;
|
23 |
+
right: 0;
|
24 |
+
bottom: 0;
|
25 |
+
background: linear-gradient(90deg,
|
26 |
+
rgba(255,255,255,0.1) 0%,
|
27 |
+
rgba(255,255,255,0.3) 50%,
|
28 |
+
rgba(255,255,255,0.1) 100%);
|
29 |
+
animation: wave 2s linear infinite;
|
30 |
+
transform: translateX(-100%);
|
31 |
+
}
|
32 |
+
|
33 |
+
@keyframes wave {
|
34 |
+
100% {
|
35 |
+
transform: translateX(100%);
|
36 |
+
}
|
37 |
+
}
|
38 |
+
|
39 |
+
.recording-animation {
|
40 |
+
animation: pulse 1.5s infinite;
|
41 |
+
}
|
42 |
+
|
43 |
+
@keyframes pulse {
|
44 |
+
0% {
|
45 |
+
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
|
46 |
+
}
|
47 |
+
70% {
|
48 |
+
box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
|
49 |
+
}
|
50 |
+
100% {
|
51 |
+
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
|
52 |
+
}
|
53 |
+
}
|
54 |
+
|
55 |
+
.format-option:hover {
|
56 |
+
transform: translateY(-3px);
|
57 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
58 |
+
}
|
59 |
+
|
60 |
+
.format-option {
|
61 |
+
transition: all 0.3s ease;
|
62 |
+
}
|
63 |
+
</style>
|
64 |
+
</head>
|
65 |
+
<body class="bg-gray-100 min-h-screen">
|
66 |
+
<div class="container mx-auto px-4 py-8">
|
67 |
+
<div class="max-w-3xl mx-auto">
|
68 |
+
<div class="text-center mb-8">
|
69 |
+
<h1 class="text-4xl font-bold text-gray-800 mb-2">Online Audio Recorder</h1>
|
70 |
+
<p class="text-gray-600">Record, play and download high-quality audio in multiple formats</p>
|
71 |
+
</div>
|
72 |
+
|
73 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
|
74 |
+
<div class="p-6">
|
75 |
+
<div class="waveform mb-6" id="waveform"></div>
|
76 |
+
|
77 |
+
<div class="flex flex-col sm:flex-row justify-center items-center gap-4 mb-6">
|
78 |
+
<button id="recordBtn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all">
|
79 |
+
<i class="fas fa-microphone"></i> Start Recording
|
80 |
+
</button>
|
81 |
+
<button id="stopBtn" disabled class="bg-gray-300 text-gray-600 font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all">
|
82 |
+
<i class="fas fa-stop"></i> Stop
|
83 |
+
</button>
|
84 |
+
<button id="playBtn" disabled class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full flex items-center gap-2 transition-all">
|
85 |
+
<i class="fas fa-play"></i> Play
|
86 |
+
</button>
|
87 |
+
</div>
|
88 |
+
|
89 |
+
<div class="text-center text-gray-500 mb-4">
|
90 |
+
<span id="timer">00:00</span>
|
91 |
+
</div>
|
92 |
+
</div>
|
93 |
+
|
94 |
+
<div class="bg-gray-50 p-6 border-t border-gray-200">
|
95 |
+
<h3 class="text-lg font-semibold text-gray-800 mb-4">Download Options</h3>
|
96 |
+
|
97 |
+
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
98 |
+
<div class="format-option bg-white p-4 rounded-lg border border-gray-200 text-center cursor-pointer" data-format="wav">
|
99 |
+
<i class="fas fa-file-audio text-3xl text-blue-500 mb-2"></i>
|
100 |
+
<p class="font-medium">WAV</p>
|
101 |
+
<p class="text-sm text-gray-500">High quality</p>
|
102 |
+
</div>
|
103 |
+
<div class="format-option bg-white p-4 rounded-lg border border-gray-200 text-center cursor-pointer" data-format="mp3">
|
104 |
+
<i class="fas fa-file-audio text-3xl text-purple-500 mb-2"></i>
|
105 |
+
<p class="font-medium">MP3</p>
|
106 |
+
<p class="text-sm text-gray-500">Compressed</p>
|
107 |
+
</div>
|
108 |
+
<div class="format-option bg-white p-4 rounded-lg border border-gray-200 text-center cursor-pointer" data-format="ogg">
|
109 |
+
<i class="fas fa-file-audio text-3xl text-green-500 mb-2"></i>
|
110 |
+
<p class="font-medium">OGG</p>
|
111 |
+
<p class="text-sm text-gray-500">Web optimized</p>
|
112 |
+
</div>
|
113 |
+
<div class="format-option bg-white p-4 rounded-lg border border-gray-200 text-center cursor-pointer" data-format="aac">
|
114 |
+
<i class="fas fa-file-audio text-3xl text-red-500 mb-2"></i>
|
115 |
+
<p class="font-medium">AAC</p>
|
116 |
+
<p class="text-sm text-gray-500">Mobile friendly</p>
|
117 |
+
</div>
|
118 |
+
</div>
|
119 |
+
|
120 |
+
<button id="downloadBtn" disabled class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-all">
|
121 |
+
<i class="fas fa-download"></i> Download Audio
|
122 |
+
</button>
|
123 |
+
</div>
|
124 |
+
</div>
|
125 |
+
|
126 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
127 |
+
<div class="p-6">
|
128 |
+
<h3 class="text-lg font-semibold text-gray-800 mb-4">Recording History</h3>
|
129 |
+
<div id="recordingsList" class="space-y-3">
|
130 |
+
<div class="text-center text-gray-500 py-8">
|
131 |
+
<i class="fas fa-microphone-slash text-3xl mb-2"></i>
|
132 |
+
<p>No recordings yet</p>
|
133 |
+
</div>
|
134 |
+
</div>
|
135 |
+
</div>
|
136 |
+
</div>
|
137 |
+
</div>
|
138 |
+
</div>
|
139 |
+
|
140 |
+
<script>
|
141 |
+
document.addEventListener('DOMContentLoaded', function() {
|
142 |
+
// Audio recording variables
|
143 |
+
let mediaRecorder;
|
144 |
+
let audioChunks = [];
|
145 |
+
let audioBlob;
|
146 |
+
let audioUrl;
|
147 |
+
let audioElement;
|
148 |
+
let timerInterval;
|
149 |
+
let seconds = 0;
|
150 |
+
|
151 |
+
// DOM elements
|
152 |
+
const recordBtn = document.getElementById('recordBtn');
|
153 |
+
const stopBtn = document.getElementById('stopBtn');
|
154 |
+
const playBtn = document.getElementById('playBtn');
|
155 |
+
const downloadBtn = document.getElementById('downloadBtn');
|
156 |
+
const timer = document.getElementById('timer');
|
157 |
+
const recordingsList = document.getElementById('recordingsList');
|
158 |
+
const formatOptions = document.querySelectorAll('.format-option');
|
159 |
+
|
160 |
+
let selectedFormat = 'wav'; // Default format
|
161 |
+
|
162 |
+
// Format selection
|
163 |
+
formatOptions.forEach(option => {
|
164 |
+
option.addEventListener('click', function() {
|
165 |
+
formatOptions.forEach(opt => opt.classList.remove('ring-2', 'ring-indigo-500'));
|
166 |
+
this.classList.add('ring-2', 'ring-indigo-500');
|
167 |
+
selectedFormat = this.dataset.format;
|
168 |
+
});
|
169 |
+
});
|
170 |
+
|
171 |
+
// Set first format as selected by default
|
172 |
+
formatOptions[0].classList.add('ring-2', 'ring-indigo-500');
|
173 |
+
|
174 |
+
// Request permission to use microphone
|
175 |
+
recordBtn.addEventListener('click', async function() {
|
176 |
+
try {
|
177 |
+
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
178 |
+
|
179 |
+
mediaRecorder = new MediaRecorder(stream);
|
180 |
+
audioChunks = [];
|
181 |
+
|
182 |
+
mediaRecorder.ondataavailable = function(event) {
|
183 |
+
audioChunks.push(event.data);
|
184 |
+
};
|
185 |
+
|
186 |
+
mediaRecorder.onstop = function() {
|
187 |
+
audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
|
188 |
+
audioUrl = URL.createObjectURL(audioBlob);
|
189 |
+
|
190 |
+
// Create audio element for playback
|
191 |
+
audioElement = new Audio(audioUrl);
|
192 |
+
|
193 |
+
// Enable play and download buttons
|
194 |
+
playBtn.disabled = false;
|
195 |
+
downloadBtn.disabled = false;
|
196 |
+
|
197 |
+
// Add to recordings list
|
198 |
+
addRecordingToList(audioUrl);
|
199 |
+
};
|
200 |
+
|
201 |
+
mediaRecorder.start(10); // Collect data every 10ms
|
202 |
+
|
203 |
+
// Start timer
|
204 |
+
seconds = 0;
|
205 |
+
updateTimer();
|
206 |
+
timerInterval = setInterval(updateTimer, 1000);
|
207 |
+
|
208 |
+
// Update UI
|
209 |
+
recordBtn.disabled = true;
|
210 |
+
recordBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
|
211 |
+
recordBtn.classList.add('bg-gray-300', 'text-gray-600');
|
212 |
+
|
213 |
+
stopBtn.disabled = false;
|
214 |
+
stopBtn.classList.remove('bg-gray-300', 'text-gray-600');
|
215 |
+
stopBtn.classList.add('bg-gray-800', 'hover:bg-gray-900', 'text-white');
|
216 |
+
|
217 |
+
// Add recording animation
|
218 |
+
recordBtn.classList.add('recording-animation');
|
219 |
+
|
220 |
+
} catch (error) {
|
221 |
+
console.error('Error accessing microphone:', error);
|
222 |
+
alert('Could not access microphone. Please check permissions.');
|
223 |
+
}
|
224 |
+
});
|
225 |
+
|
226 |
+
// Stop recording
|
227 |
+
stopBtn.addEventListener('click', function() {
|
228 |
+
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
229 |
+
mediaRecorder.stop();
|
230 |
+
|
231 |
+
// Stop all tracks in the stream
|
232 |
+
mediaRecorder.stream.getTracks().forEach(track => track.stop());
|
233 |
+
|
234 |
+
// Clear timer
|
235 |
+
clearInterval(timerInterval);
|
236 |
+
|
237 |
+
// Update UI
|
238 |
+
recordBtn.disabled = false;
|
239 |
+
recordBtn.classList.remove('bg-gray-300', 'text-gray-600');
|
240 |
+
recordBtn.classList.add('bg-red-500', 'hover:bg-red-600');
|
241 |
+
|
242 |
+
stopBtn.disabled = true;
|
243 |
+
stopBtn.classList.remove('bg-gray-800', 'hover:bg-gray-900', 'text-white');
|
244 |
+
stopBtn.classList.add('bg-gray-300', 'text-gray-600');
|
245 |
+
|
246 |
+
// Remove recording animation
|
247 |
+
recordBtn.classList.remove('recording-animation');
|
248 |
+
}
|
249 |
+
});
|
250 |
+
|
251 |
+
// Play recording
|
252 |
+
playBtn.addEventListener('click', function() {
|
253 |
+
if (audioElement) {
|
254 |
+
if (audioElement.paused) {
|
255 |
+
audioElement.play();
|
256 |
+
playBtn.innerHTML = '<i class="fas fa-pause"></i> Pause';
|
257 |
+
} else {
|
258 |
+
audioElement.pause();
|
259 |
+
playBtn.innerHTML = '<i class="fas fa-play"></i> Play';
|
260 |
+
}
|
261 |
+
}
|
262 |
+
});
|
263 |
+
|
264 |
+
// Download recording
|
265 |
+
downloadBtn.addEventListener('click', function() {
|
266 |
+
if (audioBlob) {
|
267 |
+
const a = document.createElement('a');
|
268 |
+
a.style.display = 'none';
|
269 |
+
a.href = audioUrl;
|
270 |
+
a.download = `recording_${new Date().toISOString().slice(0, 19).replace(/[:T-]/g, '_')}.${selectedFormat}`;
|
271 |
+
document.body.appendChild(a);
|
272 |
+
a.click();
|
273 |
+
setTimeout(() => {
|
274 |
+
document.body.removeChild(a);
|
275 |
+
window.URL.revokeObjectURL(audioUrl);
|
276 |
+
}, 100);
|
277 |
+
}
|
278 |
+
});
|
279 |
+
|
280 |
+
// Update timer display
|
281 |
+
function updateTimer() {
|
282 |
+
seconds++;
|
283 |
+
const minutes = Math.floor(seconds / 60);
|
284 |
+
const remainingSeconds = seconds % 60;
|
285 |
+
timer.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
|
286 |
+
}
|
287 |
+
|
288 |
+
// Add recording to history list
|
289 |
+
function addRecordingToList(url) {
|
290 |
+
// Remove placeholder if it exists
|
291 |
+
if (recordingsList.querySelector('.text-center')) {
|
292 |
+
recordingsList.innerHTML = '';
|
293 |
+
}
|
294 |
+
|
295 |
+
const recordingItem = document.createElement('div');
|
296 |
+
recordingItem.className = 'bg-gray-50 p-4 rounded-lg border border-gray-200 flex items-center justify-between';
|
297 |
+
|
298 |
+
recordingItem.innerHTML = `
|
299 |
+
<div class="flex items-center gap-3">
|
300 |
+
<i class="fas fa-microphone text-indigo-500"></i>
|
301 |
+
<div>
|
302 |
+
<p class="font-medium">Recording ${recordingsList.children.length + 1}</p>
|
303 |
+
<p class="text-sm text-gray-500">${new Date().toLocaleString()}</p>
|
304 |
+
</div>
|
305 |
+
</div>
|
306 |
+
<div class="flex gap-2">
|
307 |
+
<button class="play-history-btn bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full">
|
308 |
+
<i class="fas fa-play text-xs"></i>
|
309 |
+
</button>
|
310 |
+
<button class="download-history-btn bg-indigo-500 hover:bg-indigo-600 text-white p-2 rounded-full">
|
311 |
+
<i class="fas fa-download text-xs"></i>
|
312 |
+
</button>
|
313 |
+
</div>
|
314 |
+
`;
|
315 |
+
|
316 |
+
recordingsList.prepend(recordingItem);
|
317 |
+
|
318 |
+
// Add event listeners to the new buttons
|
319 |
+
const playBtn = recordingItem.querySelector('.play-history-btn');
|
320 |
+
const downloadBtn = recordingItem.querySelector('.download-history-btn');
|
321 |
+
|
322 |
+
const audio = new Audio(url);
|
323 |
+
|
324 |
+
playBtn.addEventListener('click', function() {
|
325 |
+
if (audio.paused) {
|
326 |
+
// Stop all other audio elements first
|
327 |
+
document.querySelectorAll('audio').forEach(a => {
|
328 |
+
if (a !== audio) a.pause();
|
329 |
+
});
|
330 |
+
|
331 |
+
audio.play();
|
332 |
+
playBtn.innerHTML = '<i class="fas fa-pause text-xs"></i>';
|
333 |
+
} else {
|
334 |
+
audio.pause();
|
335 |
+
playBtn.innerHTML = '<i class="fas fa-play text-xs"></i>';
|
336 |
+
}
|
337 |
+
});
|
338 |
+
|
339 |
+
downloadBtn.addEventListener('click', function() {
|
340 |
+
const a = document.createElement('a');
|
341 |
+
a.style.display = 'none';
|
342 |
+
a.href = url;
|
343 |
+
a.download = `recording_${new Date().toISOString().slice(0, 19).replace(/[:T-]/g, '_')}.${selectedFormat}`;
|
344 |
+
document.body.appendChild(a);
|
345 |
+
a.click();
|
346 |
+
setTimeout(() => {
|
347 |
+
document.body.removeChild(a);
|
348 |
+
}, 100);
|
349 |
+
});
|
350 |
+
|
351 |
+
// Reset play button when audio ends
|
352 |
+
audio.addEventListener('ended', function() {
|
353 |
+
playBtn.innerHTML = '<i class="fas fa-play text-xs"></i>';
|
354 |
+
});
|
355 |
+
}
|
356 |
+
});
|
357 |
+
</script>
|
358 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NeoPy/audio-recorder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
359 |
+
</html>
|
prompts.txt
ADDED
@@ -0,0 +1 @@
|
|
|
|
|
1 |
+
website to record audio online and can download the result audio on any audio format
|