-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (167 loc) · 6.19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VozLivre: Gravador de Áudio Móvel Sem Anúncios</title>
<link rel="manifest" href="manifest.json" />
<meta name="author" content="Miguel Kallemback" />
<link rel="icon" type="image/png" sizes="32x32" href="logo.png" />
<link rel="icon" type="image/png" sizes="16x16" href="logo.png" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7BZLEYLVEH"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7BZLEYLVEH');
</script>
<!-- Meta tags de SEO -->
<meta
name="description"
content="Gravador de áudio móvel sem anúncios, ideal para produções ao vivo e gravações diárias."
/>
<meta
name="keywords"
content="gravador,gravador audio gratis, recorder, free, áudio, móvel, sem anúncios, produção ao vivo, gravações diárias, VozLivre, Miguel Kallemback"
/>
<!-- FontAwesome via CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/daisyui@3.9.3/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body
class="bg-gray-900 text-white flex items-center justify-center min-h-screen"
>
<div
id="installBanner"
style="
display: none;
background-color: #333;
padding: 10px;
text-align: center;
"
>
<p>Deseja instalar este aplicativo em seu dispositivo?</p>
<button onclick="installApp()">Instalar</button>
</div>
<div
id="principal"
class="container p-5 rounded-lg shadow-lg flex flex-col"
>
<!-- Seção do Logo e VU Meter -->
<div class="flex items-center justify-center space-x-4 mb-4 relative">
<!-- VU Meter -->
<div
id="vuMeterContainer"
class="absolute top-0 right-0 w-1/4 h-4 bg-gray-700 rounded z-10"
>
<div
id="vuMeter"
class="absolute left-0 h-full bg-red-600 rounded-r"
></div>
</div>
</div>
<!-- Tempo de Gravação -->
<div class="mb-4 flex flex-col items-center justify-center">
<div class="flex items-center justify-center space-x-2">
<img style="display: none;" src="logo.png" alt="Ícone Voz Livre" class="icon w-12 h-12" />
<span id="recordingDuration" class="font-semibold">00:00</span>
<div id="recordingIndicator" class="hidden">
<center>
<svg width="30" height="30" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="5" fill="red" class="pulse"/>
<small class="text-gray-300 pulse">REC</small>
</svg></center>
</div>
</div>
<small class="text-gray-300">Voz livre - Seu gravador de áudio profissional🎤</small>
</div>
<button
class="btn glass w-1/2 text-white"
style="color: white; display: none"
onclick="startAudioContext()"
>
Iniciar VU
</button>
<!-- Controles e Listagem -->
<div class="flex-grow">
<div class="mb-4" style="opacity: 1;" title="O volume é apenas do monitoramento nao reflete na gravação">
<label for="volumeControl"><small title="O volume é apenas do monitoramento nao reflete na gravação" style="color: rgb(124, 124, 124);">Volume (Beta) <span id="volumePercent">100%</span></label></small>
<input type="range" id="volumeControl" class="range range-xs range-success" min="0" max="2" step="0.01" value="1">
</div>
<div class="mb-4">
<label for="microphoneSelect" class="block mb-2"
>Selecionar Microfone:</label
>
<select
id="microphoneSelect"
class="w-full p-2 rounded bg-gray-700 mb-4"
></select>
<button id="deleteAllButton" class="btn btn-outline btn-accent w-full">
Apagar Todas Gravações
</button>
<div class="flex items-center justify-center space-x-4 mt-4">
<input type="checkbox" class="checkbox checkbox-success" id="noiseReduction" />
<label for="noiseReduction">Reduz Ruído</label>
<input type="checkbox" class="checkbox checkbox-success" id="echoCancellation" />
<label for="echoCancellation">Cancel Eco</label>
</div>
<br>
<label for="microphoneSelect" class="block mb-2"
>Monitor de audio:</label
>
<select
id="audioOutputSelect"
class="w-full p-2 rounded bg-gray-700 mb-4"
></select>
<br />
<button id="monitorButton" class="btn glass w-full text-white">
Monitorar Áudio
</button>
</div>
<div class="flex space-x-4 mb-4 p-3 center">
<button id="recordButton" class="btn btn-primary w-1/2">
Iniciar
</button>
<button id="stopButton" class="btn w-1/2" disabled>Parar</button>
</div>
<h2 class="text-xl mb-4 font-semibold text-center">Gravações:
</h2>
<center>
<ul id="recordingsList" class="w-full"></ul>
</center>
</div>
<!-- Footer -->
<footer class="mt-5 text-center">
Feito com ❤️ por
<a
target="_blank"
href="https://wa.me/5521989328845?text=Olá%20gostaria%20de%20saber%20mais%20sobre%20serviços%20de%20TI"
>Miguel Kallemback</a
>
</footer>
</div>
<script src="script.js"></script>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.register("sw.js")
.then((registration) => {
console.log("Service Worker registrado com sucesso:", registration);
})
.catch((error) => {
console.log("Erro ao registrar o Service Worker:", error);
});
}
</script>
</body>
</html>