Modelo de PIANO 16-4-2025
- samuel gaitan
- 16 abr
- 2 Min. de lectura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piano Interactivo</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
.piano {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.key {
width: 40px;
height: 150px;
margin: 2px;
border: 1px solid black;
display: inline-block;
cursor: pointer;
text-align: center;
line-height: 150px;
font-weight: bold;
user-select: none;
}
.white-key {
background: white;
}
.black-key {
background: black;
color: white;
width: 30px;
height: 100px;
margin-left: -15px;
margin-right: -15px;
position: relative;
z-index: 2;
}
.controls {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Piano Interactivo</h1>
<div class="piano" id="piano"></div>
<div class="controls">
<button onclick="playSong()">Reproducir Canción</button>
<button onclick="stopSong()">Detener</button>
<button onclick="speedUp()">Más Rápido</button>
<button onclick="slowDown()">Más Lento</button>
<button onclick="toggleAutoPlay()">Tocar Automático</button>
</div>
<script>
const synth = new Tone.Synth().toDestination();
const xylo = new Tone.Sampler({
urls: { C4: "https://cdn.jsdelivr.net/gh/gleitz/midi-js-soundfonts/FluidR3_GM/Xylophone-C4.mp3" }
}).toDestination();
const keys = [
"C4", "C#4", "D4", "D#4", "E4", "F4", "F#4", "G4", "G#4", "A4", "A#4", "B4",
"C5", "C#5", "D5", "D#5", "E5", "F5", "F#5", "G5", "G#5", "A5", "A#5", "B5",
"C6", "C#6", "D6", "D#6", "E6", "F6", "F#6", "G6", "G#6", "A6", "A#6", "B6"
];
const pianoDiv = document.getElementById("piano");
keys.forEach(note => {
const keyDiv = document.createElement("div");
keyDiv.classList.add("key", note.includes("#") ? "black-key" : "white-key");
keyDiv.textContent = note;
keyDiv.addEventListener("mousedown", () => playNote(note));
pianoDiv.appendChild(keyDiv);
});
function playNote(note) {
synth.triggerAttackRelease(note, "8n");
xylo.triggerAttackRelease(note, "8n");
}
let song = [
{ note: "C4", duration: "4n" },
{ note: "D4", duration: "8n" },
{ note: "E4", duration: "8n" },
{ note: "F4", duration: "2n" },
{ note: "G4", duration: "4n" },
{ note: "A4", duration: "8n" },
{ note: "B4", duration: "8n" },
{ note: "C5", duration: "1n" }
];
let tempo = 120;
let index = 0;
let playing = false;
function playSong() {
playing = true;
Tone.Transport.bpm.value = tempo;
Tone.Transport.scheduleRepeat(time => {
if (!playing || index >= song.length) {
Tone.Transport.stop();
index = 0;
return;
}
let { note, duration } = song[index];
playNote(note);
index++;
}, "4n");
Tone.Transport.start();
}
function stopSong() {
playing = false;
Tone.Transport.stop();
index = 0;
}
function speedUp() {
tempo += 10;
Tone.Transport.bpm.value = tempo;
}
function slowDown() {
tempo -= 10;
if (tempo < 40) tempo = 40;
Tone.Transport.bpm.value = tempo;
}
let autoPlay = false;
function toggleAutoPlay() {
autoPlay = !autoPlay;
if (autoPlay) playSong();
else stopSong();
}
</script>
</body>
</html>
Comentarios