Piano Virtual con Transpositor

Un piano virtual interactivo con capacidad de grabación y transposición de melodías, desarrollado en JavaScript usando la librería Tone.js para síntesis de audio.

Características

• Piano virtual: Toca notas usando el teclado de tu computadora
• Grabación de melodías: Registra las notas que tocas en tiempo real
• Transposición automática: Cambia la tonalidad de tus melodías grabadas
• Reproducción: Escucha tanto la melodía original como la transpuesta
• Interfaz intuitiva: Diseño limpio y fácil de usar

Estructura del Proyecto

Piano/
├── index.html          # Estructura HTML de la aplicación
├── script.js           # Lógica principal y funcionalidades
├── style.css           # Estilos y diseño visual
└── README.md           # Documentación del proyecto

Archivos Principales

• index.html: Define la estructura de la interfaz con el piano virtual, controles de transposición y áreas de texto para melodías
• script.js: Contiene toda la lógica de funcionamiento, incluyendo síntesis de audio, grabación y transposición
• style.css: Proporciona el diseño visual y estilos responsivos

Cómo Funciona el Código

1. Síntesis de Audio

const synth = new Tone.PolySynth(Tone.Synth).toDestination();

Utiliza Tone.js para crear un sintetizador polifónico que puede tocar múltiples notas simultáneamente.

2. Mapeo de Notas

const keyboardNotes = {
    'z': 'C3', 's': 'C#3', 'x': 'D3', 'd': 'D#3', 'c': 'E3', 'v': 'F3',
    'q': 'C4', '2': 'C#4', 'w': 'D4', '3': 'D#4', 'e': 'E4', 'r': 'F4'
    // ... más teclas
};

Cada tecla del teclado está mapeada a una nota musical específica con su octava correspondiente.

3. Sistema de Grabación

let isRecording = false;
let recordedNotes = [];

// Cuando se presiona una tecla durante la grabación
if (isRecording) {
    recordedNotes.push(note);
    document.getElementById('original-melody').value = recordedNotes.join(' ');
}

Captura las notas tocadas y las almacena en un array que se muestra en tiempo real en el área de texto.

Cómo Funciona la Transposición

Algoritmo de Transposición

La transposición musical se basa en el intervalo entre dos tonalidades:

1. Cálculo del intervalo:

const interval = targetKeyNum - originalKeyNum;

2. Aplicación a cada nota:

let newNoteNum = originalNoteNum + interval;

3. Manejo de octavas:

// Si la nota baja del límite inferior (< 0)
if (newNoteNum < 0) {
    newNoteNum += 12;  // Subir una octava
    octave--;          // Bajar número de octava
}

// Si la nota sube del límite superior (> 11)
if (newNoteNum > 11) {
    newNoteNum -= 12;  // Bajar una octava
    octave++;          // Subir número de octava
}

Ejemplo Práctico

Si tienes una melodía en Do Mayor (C) y quieres transponerla a Re Mayor (D):

• Intervalo: D - C = 2 semitonos
• C4 → D4 (Do se convierte en Re)
• E4 → F#4 (Mi se convierte en Fa#)
• G4 → A4 (Sol se convierte en La)

Mapas de Conversión

const noteToNumber = { 'C': 0, 'C#': 1, 'D': 2, ... 'B': 11 };
const numberToNote = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];

Estos mapas permiten convertir entre nombres de notas y números para realizar cálculos matemáticos.

Instrucciones de Uso

Mapeo del Teclado

Octava Grave (3):

• Z = C3, S = C#3, X = D3, D = D#3, C = E3
• V = F3, G = F#3, B = G3, H = G#3, N = A3, J = A#3, M = B3

Octava Aguda (4-5):

• Q = C4, 2 = C#4, W = D4, 3 = D#4, E = E4, R = F4, 5 = F#4
• T = G4, 6 = G#4, Y = A4, 7 = A#4, U = B4, I = C5

Pasos para Usar la Aplicación

1. Iniciar Grabación:

   • Haz clic en el botón rojo 🔴 para activar la grabación
   • El botón se pondrá rojo brillante cuando esté activo

2. Tocar Melodía:

   • Usa las teclas mapeadas para tocar tu melodía
   • Las notas aparecerán automáticamente en "Melodía Original"

3. Detener Grabación:

   • Haz clic nuevamente en el botón rojo para detener

4. Transponer:

   • Selecciona la "Tonalidad Original" de tu melodía
   • Selecciona la "Tonalidad Destino" deseada
   • Haz clic en "Transponer"

5. Reproducir:

   • Usa los botones ▶️ para escuchar las melodías original y transpuesta

Dependencias

• Tone.js (v14.7.77): Librería de síntesis de audio

  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>

Características Técnicas

• Polifonía: Capacidad de tocar múltiples notas simultáneamente
• Rango: 2 octavas completas (C3 a C5)
• Precisión: Transposición matemática exacta preservando intervalos
• Formato: Notación estándar americana (C, D, E, F, G, A, B)

Personalización

Para añadir más octavas o cambiar el mapeo de teclas, modifica el objeto keyboardNotes en script.js:

const keyboardNotes = {
    'nueva_tecla': 'C6',  // Añadir nueva nota
    // ... resto del mapeo
};

¡Disfruta creando y transponiendo melodías! 🎶