Páginas

anun1

martes, 18 de agosto de 2026

Sonidos Chiptune En HTML y JavaScript Para Los Keygenes

Hola amigos hoy vengo con unos sonidos de chiptune algo simple son 3 códigos diferentes, se los muestro por que los implementaré en mis futuros generadores de claves, ya que me gustan los tonos y si hago un tema solo para esto es para que vean solo el código del sonido y no se confundan con la generación del serial en el futuro, bueno aquí el primero.

<html>
<head>
<title>Tetris Loop</title>
</head>
<body>
<h1>Sonido De Tetris Para Keygen</h1>   
<button class="btn-play" onclick="activarBucle()">PLAY LOOP</button>
<button class="btn-stop" onclick="detenerBucle()">STOP</button>
<script>
let audioCtx;
let bucleActivo = false;
let timerBucle;

function inicializarAudio() 
{
   if (!audioCtx) 
   {
      // Creamos el motor de sonido nativo del navegador
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
   }
   if (audioCtx.state === 'suspended') 
   {
      audioCtx.resume();
   }
}
function tocarNota(frecuencia, duracion, tiempoInicio) 
{
   if (!bucleActivo) return;

   const oscilador = audioCtx.createOscillator();
   const nodoVolumen = audioCtx.createGain();

   oscilador.type = 'square'; 
   oscilador.frequency.setValueAtTime(frecuencia, tiempoInicio);

   nodoVolumen.gain.setValueAtTime(0.12, tiempoInicio);
   nodoVolumen.gain.exponentialRampToValueAtTime(0.00001, tiempoInicio + duracion - 0.01);

   oscilador.connect(nodoVolumen);
   nodoVolumen.connect(audioCtx.destination);

   oscilador.start(tiempoInicio);
   oscilador.stop(tiempoInicio + duracion);
}
function secuenciarCancion() 
{
   if (!bucleActivo) return;

   const ahora = audioCtx.currentTime;

   // Frecuencias musicales en hercios para las notas de Tetris
   const E5 = 659.25, B4 = 493.88, C5 = 523.25, D5 = 587.33, A4 = 440.00, G4 = 392.00;

   const partitura = [
       [E5, 0.3], [B4, 0.15], [C5, 0.15], [D5, 0.3], [C5, 0.15], [B4, 0.15],
       [A4, 0.3], [A4, 0.15], [C5, 0.15], [E5, 0.3], [D5, 0.15], [C5, 0.15],
       [B4, 0.45], [C5, 0.15], [D5, 0.3], [E5, 0.3], [C5, 0.3], [A4, 0.3], [A4, 0.45]
       ];

   let tiempoAcumulado = 0;

   // CORRECCIÓN AQUÍ: Ahora extraemos correctamente el índice [0] y [1] de cada nota
   partitura.forEach(nota => {
   const frecuencia = nota[0]; // Frecuencia (Hz)
   const duracion = nota[1];   // Duración (Segundos)
                
   tocarNota(frecuencia, duracion, ahora + tiempoAcumulado);
   tiempoAcumulado += duracion + 0.02; 
    });

   const tiempoTotalMs = tiempoAcumulado * 1000;
            
   timerBucle = setTimeout(() => {
   secuenciarCancion();
   }, tiempoTotalMs);
}
function activarBucle()
 {
   if (bucleActivo) return; 
   bucleActivo = true;
   inicializarAudio();
   secuenciarCancion();
}
function detenerBucle()
{
   bucleActivo = false;
   clearTimeout(timerBucle);
}
</script>
</body>
</html>

Nota: no soy compositor, así que las frecuencias las saque de chatgpt....aquí una imagen


otra cosa le puse boton stop para que se detubiera y tambien por que no suena en automatico por seguridad no lo permite el navegador en html...aqui el segundo


<html>
<head>
    <title>Chiptune</title>
</head>

<body>
<button onclick="play()">▶ Play</button>
<button onclick="stop()">■ Stop</button>
<script>
let audio;
let timer;
let notas = [
    261.63, 261.63, 392.00, 523.25,
    392.00, 329.63, 293.66, 261.63
];

let i = 0;

function play()
{
    stop();

    audio = new AudioContext();

    i = 0;

    timer = setInterval(function()
    {
        let osc = audio.createOscillator();
        let gain = audio.createGain();

        osc.type = "square";
        osc.frequency.value = notas[i];

        gain.gain.value = 0.1;

        osc.connect(gain);
        gain.connect(audio.destination);

        osc.start();

        setTimeout(function()
        {
            osc.stop();
        }, 150);

        i++;

        if(i >= notas.length)
            i = 0;

    }, 200);
}


function stop()
{
    clearInterval(timer);

    if(audio)
    {
        audio.close();
        audio = null;
    }
}

</script>
</body>
</html>

Creo que no necesita imagen son solo 2 botones el Play y Stop, seguimos con el último código

<html>
<head>
    <meta charset="UTF-8">
    <title>Chiptune clásico</title>
</head>

<body>
<button onclick="play()">▶ Play</button>
<button onclick="stop()">■ Stop</button>
<script>
let audio;
let timer;
let i = 0;

let notas = [
    261.63, 329.63, 392.00, 523.25,
    392.00, 329.63, 261.63, 196.00,

    293.66, 349.23, 440.00, 587.33,
    440.00, 349.23, 293.66, 220.00,

    329.63, 392.00, 493.88, 659.25,
    493.88, 392.00, 329.63, 261.63,

    392.00, 523.25, 659.25, 783.99,
    659.25, 523.25, 392.00, 329.63
];

function play()
{
    stop();

    audio = new AudioContext();

    i = 0;

    timer = setInterval(function()
    {
        let osc = audio.createOscillator();
        let gain = audio.createGain();

        osc.type = "square";
        osc.frequency.value = notas[i];

        gain.gain.value = 0.08;

        osc.connect(gain);
        gain.connect(audio.destination);

        osc.start();

        setTimeout(function()
        {
            osc.stop();
        }, 100);

        i++;

        if(i >= notas.length)
        {
            i = 0;
        }

    }, 150);
}

function stop()
{
    clearInterval(timer);

    if(audio)
    {
        audio.close();
        audio = null;
    }
}
</script>
</body>
</html>

Bueno espero les guste, silos quieren probar solo copean y pegan en el bloc de notas como música.html y ejecutan... Ami me gustan los sonidos en los keygen por ese motivo los quiero implementar en el futuro y solo hice un tema de esto porque quiero que lo vean solo sin más paja y no se equivoquen en el futuro con la generación del serial u otra cosa.

Saludos Flamer

No hay comentarios.:

Publicar un comentario