Drk0027/audio-cutter-pwa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Correcciones varias. Actualizacion de estilos. Mejoras para PWA

Browse Source
This commit is contained in:
Drk0027
2026-01-27 15:52:26 -05:00
parent 5d5711ff09
commit 98ed1ee17a
116 changed files with 686 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
index.html
View File

@@ -1,35 +1,184 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#4A90E2">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<link rel="manifest" href="manifest.json">
<title>Audio Cutter Pro 2026</title>
<script src="wavesurfer.min.js"></script>
<script src="plugins/regions.min.js"></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(reg => console.log('Registro exitoso', reg))
.catch(err => console.warn('Error al registrar', err));
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(reg => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// Aquí es donde le avisas al usuario
alert('Nueva versión disponible. Por favor, recarga la página.');
}
}
};
};
});
}
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js').then(reg => {
// Detecta si hay una actualización esperando
reg.addEventListener('updatefound', () => {
const newWorker = reg.installing;
newWorker.addEventListener('statechange', () => {
// Cuando el nuevo SW se ha instalado completamente
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// Crea una confirmación para el usuario
const r = confirm("¡Hay una nueva versión disponible! ¿Quieres actualizar ahora?");
if (r === true) {
window.location.reload(); // Recarga la página para aplicar cambios
}
}
});
});
});
});
}
</script>
<style>
:root { --bg: #0f172a; --card: #1e293b; --accent: #3b82f6; }
body { font-family: sans-serif; background: var(--bg); color: white; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.card { background: var(--card); padding: 20px; border-radius: 15px; width: 100%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
#waveform { background: #000; border-radius: 10px; margin: 20px 0; border: 1px solid #334155; }
.info { display: flex; justify-content: space-between; font-family: monospace; color: #94a3b8; margin-bottom: 10px; }
.controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
button { padding: 10px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; transition: 0.2s; }
.btn-play { background: #10b981; color: white; }
.btn-stop { background: #ef4444; color: white; }
.btn-export { background: var(--accent); color: white; }
.btn-zoom { background: #475569; color: white; }
.btn-share { background: #f59e0b; color: white; display: none; }
#status { font-size: 0.8rem; margin-top: 10px; text-align: center; color: #64748b; }
:root {
--bg: #ffffff;
--card: #1e293b;
--accent: #3b82f6;
--texto: #f8f7f7;
}
/* Colores para Tema Oscuro */
@media (prefers-color-scheme: dark) {
:root {
--fondo: #121212;
--texto: #0c0c0c;
--primario: #1a73e8;
--card: #d6dbe4;
}
}
/* Uso de las variables */
body {
background-color: var(--fondo);
color: var(--texto);
}
body {
font-family: sans-serif;
background: var(--bg);
/*color: white;*/
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.card {
background: var(--card);
padding: 20px;
border-radius: 15px;
width: 100%;
max-width: 700px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
#waveform {
background: #000;
border-radius: 10px;
margin: 20px 0;
border: 1px solid #334155;
}
.info {
display: flex;
justify-content: space-between;
font-family: monospace;
color: #94a3b8;
margin-bottom: 10px;
}
.controls {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
button {
padding: 10px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
transition: 0.2s;
}
.btn-play {
background: #10b981;
color: white;
}
.btn-stop {
background: #ef4444;
color: white;
}
.btn-export {
background: var(--accent);
color: white;
}
.btn-zoom {
background: #475569;
color: white;
}
.btn-share {
background: #f59e0b;
color: white;
display: none;
}
#status {
font-size: 0.8rem;
margin-top: 10px;
text-align: center;
color: #64748b;
}
</style>
</head>
<body>
<div class="card">
<h3>Cortador Pro (Misma Calidad)</h3>
<h3>Audio Cutter PWA</h3>
<input type="file" id="audioInput" accept="audio/*">
<div id="waveform"></div>
<div class="info">
<span id="totalTime">Total: 00:00</span>
<span id="selectionTime">Selección: 00:00 - 00:00</span>
@@ -86,7 +235,7 @@
function updateSelectionLabel() {
if (activeRegion) {
document.getElementById('selectionTime').innerText =
document.getElementById('selectionTime').innerText =
`Selección: ${formatTime(activeRegion.start)} - ${formatTime(activeRegion.end)}`;
}
}
@@ -119,7 +268,7 @@
source.start(0, activeRegion.start, duration);
const renderedBuffer = await offlineCtx.startRendering();
// Grabación del Stream para comprimir
const destination = audioCtx.createMediaStreamDestination();
const recorder = new MediaRecorder(destination.stream);
@@ -140,7 +289,7 @@
const playSource = audioCtx.createBufferSource();
playSource.buffer = renderedBuffer;
playSource.connect(destination);
recorder.start();
playSource.start();
playSource.onended = () => recorder.stop();
@@ -160,4 +309,5 @@
};
</script>
</body>
</html>
</html>