Playable PIANO with HTML CSS and
JavaScript
Video Tutorial of Playable PIANO
Playable PIANO [Source Codes]
To Create Playable PIANO with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Playable Piano</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="piano-container"></div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body {
- padding: 0;
- margin: 0;
- background-color: #CFD0D0;
- }
- .piano-container {
- display: flex;
- position: absolute;
- transform: translate(-50%, -50%);
- left: 50%;
- top: 50%;
- padding: 4em 1em 1em 1em;
- border-radius: 0.62em;
- background-color: #24272e;
- box-shadow: 0 2em 4em rgba(7, 0, 53, 0.25);
- }
- .white-key {
- width: 4.37em;
- height: 17.5em;
- background-color: #ffffff;
- border-radius: 0 0 0.3em 0.3em;
- border: 2px solid #24272e;
- box-sizing: border-box;
- cursor: pointer;
- }
- .white-key:hover {
- background-color: #ebebeb;
- }
- .black-key {
- width: 2.5em;
- height: 10em;
- border-radius: 0 0 0.3em 0.3em;
- box-sizing: border-box;
- position: absolute;
- background-color: #070a0f;
- cursor: pointer;
- }
- .black-key:hover {
- background-color: #24272e;
- }
- .black-key:nth-child(1) {
- left: 4em;
- }
- .black-key:nth-child(2) {
- left: 8.37em;
- }
- .black-key:nth-child(3) {
- left: 17.12em;
- }
- .black-key:nth-child(4) {
- left: 21.5em;
- }
- .black-key:nth-child(5) {
- left: 25.87em;
- }
- .black-key:nth-child(6) {
- left: 34.62em;
- }
- .black-key:nth-child(7) {
- left: 39em;
- }
- .black-key:nth-child(8) {
- left: 47.75em;
- }
- .black-key:nth-child(9) {
- left: 52.12em;
- }
- .black-key:nth-child(10) {
- left: 56.5em;
- }
-
- @media screen and (max-width: 767px) {
- .piano-container{
- transform: rotate(180deg);
- left: 50%;
- top: 50%;
- }
- }
- @media screen and (max-width: 500px) {
- .piano-container {
- transform: rotate(180deg);
- left: 50%;
- top: 50%;
- }
- }
- @media screen and (max-width: 400px) {
- .piano-container {
- transform: rotate(180deg);
- left: 50%;
- top: 50%;
- }
- }
-
Now paste the following codes into your script.js file
- let pianoContainer = document.getElementsByClassName("piano-container");
- const base = "./audio/";
- window.onload = () => {
- //24keys
- for (let index = 1; index <= 24; index++) {
- let div = document.createElement("div");
- div.classList.add("key", index <= 10 ? "black-key" : "white-key");
- //For playing audio on click
- const number = index <= 9 ? "0" + index : index;
- div.addEventListener("click", () => {
- new Audio(`${base}key${number}.mp3`).play();
- });
- pianoContainer[0].appendChild(div);
- }
- };
-
If you face any difficulties while creating Playable PIANO or your code is not working as expected, you can download the source code files by clicking download button.