Feeeeliz viernes de tuuutoriaaaaleeeeessss!!!! ¿Cómo estáis mis niñas? Hoy llega un nuevo tutorial de este precioso, maravilloso y super funcional piano para tu blog:
Este es el tutorial más sencillo de TOOOOODOOOOS mis tutoriales ya que lo único que deberás cambiar del código es el tamaño jajaja. Pues bueno, aquí te dejo el código:
<div id="ali-piano">
<div class="piano-keys">
<!-- TECLAS BLANCAS -->
<button class="white-key" data-note="C4"></button>
<button class="white-key" data-note="D4"></button>
<button class="white-key" data-note="E4"></button>
<button class="white-key" data-note="F4"></button>
<button class="white-key" data-note="G4"></button>
<button class="white-key" data-note="A4"></button>
<button class="white-key" data-note="B4"></button>
<button class="white-key" data-note="C5"></button>
<!-- TECLAS NEGRAS -->
<button class="black-key black-cs" data-note="Cs4"></button>
<button class="black-key black-ds" data-note="Ds4"></button>
<button class="black-key black-fs" data-note="Fs4"></button>
<button class="black-key black-gs" data-note="Gs4"></button>
<button class="black-key black-as" data-note="As4"></button>
</div>
</div>
<style>
/* =========================================
CONTENEDOR
========================================= */
#ali-piano {
width: 320px;
max-width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* =========================================
PIANO
========================================= */
#ali-piano .piano-keys {
position: relative;
width: 320px;
max-width: 100%;
height: 145px;
display: flex;
background: #333;
border: 3px solid #333;
border-radius: 0 0 12px 12px;
box-sizing: border-box;
}
/* =========================================
TECLAS BLANCAS
========================================= */
#ali-piano .white-key {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
background: #fff;
border: 0;
border-right: 3px solid #333;
border-radius: 0 0 10px 10px;
cursor: pointer;
box-sizing: border-box;
transition:
background 0.06s ease,
transform 0.06s ease;
-webkit-tap-highlight-color: transparent;
}
/* Última tecla */
#ali-piano .white-key:last-of-type {
border-right: none;
}
/* Tecla blanca pulsada */
#ali-piano .white-key.active {
background: #f2f2f2;
transform: translateY(2px);
}
/* =========================================
TECLAS NEGRAS
========================================= */
#ali-piano .black-key {
position: absolute;
top: 0;
width: 25px;
height: 87px;
padding: 0;
background: #000;
border: none;
border-radius: 0 0 7px 7px;
cursor: pointer;
z-index: 10;
transition:
background 0.06s ease,
transform 0.06s ease;
-webkit-tap-highlight-color: transparent;
}
/* =========================================
POSICIÓN DE LAS TECLAS NEGRAS
========================================= */
#ali-piano .black-cs {
left: calc(12.5% - 12.5px);
}
#ali-piano .black-ds {
left: calc(25% - 12.5px);
}
#ali-piano .black-fs {
left: calc(50% - 12.5px);
}
#ali-piano .black-gs {
left: calc(62.5% - 12.5px);
}
#ali-piano .black-as {
left: calc(75% - 12.5px);
}
/* Tecla negra pulsada */
#ali-piano .black-key.active {
background: #252525;
transform: translateY(2px);
}
</style>
<script>
(function () {
/* =========================================
FRECUENCIAS
========================================= */
const frequencies = {
C4: 261.63,
Cs4: 277.18,
D4: 293.66,
Ds4: 311.13,
E4: 329.63,
F4: 349.23,
Fs4: 369.99,
G4: 392.00,
Gs4: 415.30,
A4: 440.00,
As4: 466.16,
B4: 493.88,
C5: 523.25
};
let audioContext = null;
function getAudioContext() {
if (!audioContext) {
audioContext =
new (window.AudioContext ||
window.webkitAudioContext)();
}
if (audioContext.state === "suspended") {
audioContext.resume();
}
return audioContext;
}
/* =========================================
REPRODUCIR NOTA
========================================= */
function playNote(note, keyElement) {
const ctx = getAudioContext();
const frequency = frequencies[note];
if (!frequency) return;
const oscillator = ctx.createOscillator();
const gain = ctx.createGain();
oscillator.type = "triangle";
oscillator.frequency.setValueAtTime(
frequency,
ctx.currentTime
);
gain.gain.setValueAtTime(
0,
ctx.currentTime
);
gain.gain.linearRampToValueAtTime(
0.45,
ctx.currentTime + 0.015
);
gain.gain.exponentialRampToValueAtTime(
0.001,
ctx.currentTime + 1.8
);
oscillator.connect(gain);
gain.connect(ctx.destination);
oscillator.start();
oscillator.stop(
ctx.currentTime + 1.8
);
keyElement.classList.add("active");
setTimeout(function () {
keyElement.classList.remove("active");
}, 120);
}
/* =========================================
CLIC / MÓVIL
========================================= */
const keys =
document.querySelectorAll(
"#ali-piano .white-key, #ali-piano .black-key"
);
keys.forEach(function (key) {
key.addEventListener(
"pointerdown",
function (event) {
event.preventDefault();
playNote(
key.dataset.note,
key
);
}
);
});
/* =========================================
TECLADO DEL ORDENADOR
========================================= */
const keyboardMap = {
a: "C4",
w: "Cs4",
s: "D4",
e: "Ds4",
d: "E4",
f: "F4",
t: "Fs4",
g: "G4",
y: "Gs4",
h: "A4",
u: "As4",
j: "B4",
k: "C5"
};
const pressedKeys = {};
document.addEventListener(
"keydown",
function (event) {
const key =
event.key.toLowerCase();
const note =
keyboardMap[key];
if (!note) return;
if (pressedKeys[key]) return;
pressedKeys[key] = true;
const pianoKey =
document.querySelector(
'#ali-piano [data-note="' +
note +
'"]'
);
if (pianoKey) {
playNote(
note,
pianoKey
);
}
}
);
document.addEventListener(
"keyup",
function (event) {
const key =
event.key.toLowerCase();
pressedKeys[key] = false;
}
);
})();
</script>
Puedes ver que debajo de todo lo de las teclas está el "width: 320px" donde puedes cambiarlo según el tamaño de tu sidebar. Recuerda que una vez copiado el código tienes que ir a la parte de "Diseño" y en el sidebar que deseas ponerlo dale a "añadir un gadget" y en "HTML/JavaScript" pegarás el código. Recuerda darle a guardar.
Y ya estaría, es muy sencillo, espero que os funcione <33
Muchas gracias por el tutoriall 💕
ResponderEliminar