Créer un piano fonctionnel avec JavaScript
Salut dans ce tutoriel nous allons apprendre avec l'utilisation de JavaScript pour construire un piano jouable peut être une façon amusante et stimulante d'apprendre et d'améliorer vos compétences en codage. Ce poste vous apprendra comment créer un PIANO virtuel jouable en HTML, CSS et JavaScript à partir de zéro qui peut être joué directement dans un navigateur Web
Si vous ne savez pas, un piano est un instrument de musique qui produit un son en frappant une série de touches ou de notes sur un clavier. Sur mon piano, les utilisateurs peuvent jouer différents musiques en cliquant sur les touches ou en utilisant les touches du clavier. Ils peuvent également régler le volume et afficher ou masquer les touches de raccourci sur le piano.
En raison de sa réactivité, ce piano fonctionne également sans problème sur les appareils tactiles comme les téléphones.
Code Source - Piano
Pour créer un piano virtuel jouable à l'aide de HTML, CSS et JavaScript, suivez les étapes indiquées ligne par ligne :
1. Créez un dossier. Vous pouvez nommer ce dossier comme vous le souhaitez et y placer les fichiers répertoriés ci-dessous.
2. Créez un fichier index.html. Le nom du fichier doit être index et son extension .html
3. Créez un fichier style.css. Le nom du fichier doit être style et son extension .css
4. Créez un fichier script.js. Le nom du fichier doit être script et son extension .js
Vous devez télécharger le code source pour obtenir le code complet 😊
Tout d'abord, collez les codes suivants dans votre fichier index.html :Code HTML
<!DOCTYPE html>
<!-- https://t.me/codingtuto -->
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Piano</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<header>
<h2>PIANO 🎹</h2>
<div class="column volume-slider">
<span>Volume</span><input type="range" min="0" max="1" value="0.5" step="any">
</div>
<div class="column keys-checkbox">
<span>Touches</span><input type="checkbox" checked>
</div>
</header>
<ul class="piano-keys">
<li class="key white" data-key="a"><span>a</span></li>
<li class="key black" data-key="w"><span>w</span></li>
<li class="key white" data-key="s"><span>s</span></li>
<li class="key black" data-key="e"><span>e</span></li>
<li class="key white" data-key="d"><span>d</span></li>
<li class="key white" data-key="f"><span>f</span></li>
<li class="key black" data-key="t"><span>t</span></li>
<li class="key white" data-key="g"><span>g</span></li>
<li class="key black" data-key="y"><span>y</span></li>
<li class="key white" data-key="h"><span>h</span></li>
<li class="key black" data-key="u"><span>u</span></li>
<li class="key white" data-key="j"><span>j</span></li>
<li class="key white" data-key="k"><span>k</span></li>
<li class="key black" data-key="o"><span>o</span></li>
<li class="key white" data-key="l"><span>l</span></li>
<li class="key black" data-key="p"><span>p</span></li>
<li class="key white" data-key=";"><span>;</span></li>
</ul>
</div>
</body>
</html>
Code CSS
Ensuite, collez le code suivants dans votre fichier style.css :
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #E3F2FD;
}
.wrapper {
padding: 35px 40px;
border-radius: 20px;
background: #141414;
}
.wrapper header {
display: flex;
color: #B2B2B2;
align-items: center;
justify-content: space-between;
}
header h2 {
font-size: 1.6rem;
}
header .column {
display: flex;
align-items: center;
}
header span {
font-weight: 500;
margin-right: 15px;
font-size: 1.19rem;
}
header input {
outline: none;
border-radius: 30px;
}
.volume-slider input {
accent-color: #fff;
}
.keys-checkbox input {
height: 30px;
width: 60px;
cursor: pointer;
appearance: none;
position: relative;
background: #4B4B4B
}
.keys-checkbox input::before {
content: "";
position: absolute;
top: 50%;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #8c8c8c;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.keys-checkbox input:checked::before {
left: 35px;
background: #fff;
}
.piano-keys {
display: flex;
list-style: none;
margin-top: 40px;
}
.piano-keys .key {
cursor: pointer;
user-select: none;
position: relative;
text-transform: uppercase;
}
.piano-keys .black {
z-index: 2;
width: 44px;
height: 140px;
margin: 0 -22px 0 -22px;
border-radius: 0 0 5px 5px;
background: linear-gradient(#333, #000);
}
.piano-keys .black.active {
box-shadow: inset -5px -10px 10px rgba(255,255,255,0.1);
background:linear-gradient(to bottom, #000, #434343);
}
.piano-keys .white {
height: 230px;
width: 70px;
border-radius: 8px;
border: 1px solid #000;
background: linear-gradient(#fff 96%, #eee 4%);
}
.piano-keys .white.active {
box-shadow: inset -5px 5px 20px rgba(0,0,0,0.2);
background:linear-gradient(to bottom, #fff 0%, #eee 100%);
}
.piano-keys .key span {
position: absolute;
bottom: 20px;
width: 100%;
color: #A2A2A2;
font-size: 1.13rem;
text-align: center;
}
.piano-keys .key.hide span {
display: none;
}
.piano-keys .black span {
bottom: 13px;
color: #888888;
}
@media screen and (max-width: 815px) {
.wrapper {
padding: 25px;
}
header {
flex-direction: column;
}
header :where(h2, .column) {
margin-bottom: 13px;
}
.volume-slider input {
max-width: 100px;
}
.piano-keys {
margin-top: 20px;
}
.piano-keys .key:where(:nth-child(9), :nth-child(10)) {
display: none;
}
.piano-keys .black {
height: 100px;
width: 40px;
margin: 0 -20px 0 -20px;
}
.piano-keys .white {
height: 180px;
width: 60px;
}
}
@media screen and (max-width: 615px) {
.piano-keys .key:nth-child(13),
.piano-keys .key:nth-child(14),
.piano-keys .key:nth-child(15),
.piano-keys .key:nth-child(16),
.piano-keys .key :nth-child(17) {
display: none;
}
.piano-keys .white {
width: 50px;
}
}
Code JavaScript
Enfin, collez le codes suivant dans votre fichier script.js : J'ai écrit des commentaires sur chaque ligne JavaScript afin que vous puissiez facilement comprendre quelle ligne fait quoi.
const pianoKeys = document.querySelectorAll(".piano-keys .key"),
volumeSlider = document.querySelector(".volume-slider input"),
keysCheckbox = document.querySelector(".keys-checkbox input");
let allKeys = [],
audio = new Audio(`tunes/a.wav`); // Son par défaut
const playTune = (key) => {
audio.src = `tunes/${key}.wav`; // transmission audio src basée sur la touche enfoncée
audio.play(); // joueur l'audio
const clickedKey = document.querySelector(`[data-key="${key}"]`); // obtenir un élément clé cliqué
clickedKey.classList.add("active"); // ajouter une classe active à l'élément clé cliqué
setTimeout(() => { // suppression de la classe active après 150 ms de l'élément clé cliqué
clickedKey.classList.remove("active");
}, 150);
}
pianoKeys.forEach(key => {
allKeys.push(key.dataset.key); // ajouter la valeur de la clé de données au tableau allKeys
// appeler la fonction playTune en passant la valeur de la clé de données comme argument
key.addEventListener("click", () => playTune(key.dataset.key));
});
const handleVolume = (e) => {
audio.volume = e.target.value; // transmettre la valeur du curseur de plage en tant que volume audio
}
const showHideKeys = () => {
// basculer masquer la classe de chaque clé sur la case à cocher cliquez
pianoKeys.forEach(key => key.classList.toggle("hide"));
}
const pressedKey = (e) => {
// si la touche enfoncée est dans le tableau allKeys
if(allKeys.includes(e.key)) playTune(e.key);
}
keysCheckbox.addEventListener("click", showHideKeys);
volumeSlider.addEventListener("input", handleVolume);
document.addEventListener("keydown", pressedKey);
C'est tout; maintenant vous avez réussi à créer un PIANO jouable en HTML, CSS et JavaScript sans son 😅 Si vous rencontrez des problèmes ou si votre code ne fonctionne pas comme prévu, vous pouvez télécharger les fichiers de code source de ce PIANO en cliquant sur le bouton «Voir le contenu ». C'est gratuit et un fichier zip sera téléchargé contenant le dossier du projet avec les fichiers de code source.
2 commentaires