Volver al índice

docs/voice-studio/index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Voz de la criatura</title>
  <style>
    :root{color-scheme:dark;--bg:#111015;--card:#1c1921;--muted:#bab0bd;--edge:#3a303b;--accent:#dc949d;--ink:#f6edf0}
    *{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:radial-gradient(ellipse at top,#342029,transparent 70%),var(--bg)}
    main{max-width:1060px;margin:0 auto;padding:46px 24px}header{display:flex;justify-content:space-between;align-items:start;gap:24px}h1{font-size:clamp(30px,5vw,48px);letter-spacing:-.04em;margin:0 0 10px}h2{font-size:20px;margin:0 0 20px}p{margin:0 0 18px;color:var(--muted)}
    .eyebrow{font-size:12px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:10px}.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:30px}.card{background:var(--card);border:1px solid var(--edge);border-radius:20px;padding:26px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.muted{color:var(--muted);font-size:14px}
    button,.button{font:inherit;font-weight:600;border:1px solid var(--edge);border-radius:11px;padding:11px 17px;cursor:pointer;background:#302731;color:var(--ink);text-decoration:none;display:inline-block}button:hover,.button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:wait}.primary{background:#b75564;border-color:#b75564;color:white}.secondary{background:transparent}.danger{background:#653742}
    .divider{height:1px;background:var(--edge);margin:24px 0}audio{width:100%;height:42px;margin-top:12px}input[type=file]{width:100%;color:var(--muted);font:inherit}input::file-selector-button{border:1px solid var(--edge);border-radius:9px;background:#302731;color:var(--ink);padding:9px 12px;margin-right:10px;cursor:pointer}input[type=range]{width:100%;accent-color:var(--accent);margin:12px 0 22px}label{display:flex;justify-content:space-between;gap:12px;font-weight:600}output{font-weight:400;color:var(--accent)}textarea{width:100%;min-height:125px;resize:vertical;border:1px solid var(--edge);border-radius:12px;background:#131117;color:var(--ink);padding:14px;font:inherit;margin-bottom:12px}.status{min-height:26px;margin-top:20px;color:var(--accent)}.hidden,[hidden]{display:none!important}.result{margin-top:20px}.downloads{margin-top:15px}.meter{font-variant-numeric:tabular-nums;font-size:15px}.note{padding:18px 22px;border-left:3px solid #9b6270;margin-top:22px;background:#211a22;border-radius:0 12px 12px 0}.note p{margin:0}.footer{font-size:13px;margin-top:30px;color:var(--muted)}
    @media(max-width:720px){main{padding:30px 16px}.grid{grid-template-columns:1fr}.card{padding:22px}header{flex-direction:column}header button{font-size:14px}}
  </style>
</head>
<body>
<main>
  <header><div><div class="eyebrow">Raps · Estudio de audio</div><h1>Voz de la criatura</h1><p>Grabá tu voz o importá una toma. Escuchá el resultado y guardalo para tus escenas.</p></div><button id="close" class="secondary">Cerrar estudio</button></header>
  <div class="grid">
    <section class="card">
      <h2>Tu interpretación</h2>
      <div class="row"><button id="record" class="primary">Grabar voz</button><button id="stop" class="danger" disabled>Terminar toma</button><span id="timer" class="meter">00:00</span></div>
      <div class="divider"></div>
      <p class="muted">También podés usar una grabación que ya tengas.</p>
      <input id="file" type="file" accept="audio/*,.wav,.mp3,.ogg,.opus,.webm,.m4a,.flac" aria-label="Importar audio">
      <div id="source-area" hidden><p id="source-name" class="muted" style="margin-top:16px;margin-bottom:0"></p><audio id="source" controls preload="metadata"></audio></div>
      <div class="divider"></div>
      <label for="pitch">Gravedad de la voz <output id="pitch-label">77%</output></label><input id="pitch" type="range" min="60" max="95" value="77">
      <label for="texture">Garganta y aire <output id="texture-label">100%</output></label><input id="texture" type="range" min="0" max="150" value="100">
      <label for="echo">Eco <output id="echo-label">100%</output></label><input id="echo" type="range" min="0" max="150" value="100">
      <div class="row"><button id="process" class="primary" disabled>Transformar mi audio</button><button id="reset" class="secondary">Preset criatura</button><button id="drone" class="secondary">Tarareo grave</button></div>
    </section>
    <div>
      <section class="card">
        <h2>Voz de la criatura</h2><p id="empty-result">La toma transformada aparecerá acá.</p>
        <div id="result" hidden><audio id="processed" controls preload="metadata"></audio><div class="downloads row"><a id="save-wav" class="button" download="criatura.wav">WAV</a><a id="save-ogg" class="button" download="criatura.ogg">OGG</a><a id="save-mp3" class="button" download="criatura.mp3">MP3</a></div><p class="muted" style="margin-top:16px;margin-bottom:0">WAV para editar; OGG para Minecraft; MP3 para compartir.</p></div>
        <div id="status" class="status" role="status" aria-live="polite">Listo para grabar.</div>
      </section>
      <section class="card" style="margin-top:20px" id="synthesis-card" hidden>
        <h2>Escribir una frase</h2><p class="muted">Usá la voz sintetizada de la criatura con los mismos ajustes.</p><textarea id="text" maxlength="400" placeholder="No abras la puerta. Ya estoy del otro lado." aria-label="Frase para sintetizar"></textarea><button id="synthesize" class="primary">Crear voz desde texto</button>
      </section>
      <div class="note"><p class="muted">Para una escena, grabá despacio y dejá silencios. Un tarareo también puede convertirse en una textura grave; combiná varias tomas en tu editor para crear la música.</p></div>
    </div>
  </div>
  <p class="footer">Las grabaciones se procesan en esta PC. Guardá las tomas que quieras conservar antes de cerrar. Hasta tres minutos por audio.</p>
</main>
<script src="/app.js"></script>
</body>
</html>