An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Some of Our Sources
- Technology Review
- Web Designer Wall
- Six Revisions
- TutsPlus - Design
- Inspiredology
- Web Designer Depot
- Noupe
- CSS Tricks
- Web Resource Source
- The Verge
Help Webnuz
Referal links:
October 23, 2022 02:12 pm GMT
Original Link: https://dev.to/mjb/piano-html-css-javascript-1p3b
Piano - HTML, CSS, JavaScript
Hello friends I will show you how you can create a simple piano using HTML, CSS and JavaScript
This is the final look
Show lets get into the code
this is HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"> <title>Document</title></head><body> <div class="main"> <div class="header"> <p>Piano</p> </div> <div class="contents"> <div class="key" onclick="generate_sound(1)"> <p>A</p> </div> <div class="keyup" onclick="generate_sound(2)"> </div> <div class="key" onclick="generate_sound(3)"> <p>B</p> </div> <div class="keyup" onclick="generate_sound(4)"> </div> <div class="key" onclick="generate_sound(5)"> <p>C</p> </div> <div class="keyup" onclick="generate_sound(6)"> </div> <div class="key" onclick="generate_sound(7)"> <p>D</p> </div> <div class="keyup" onclick="generate_sound(8)"> </div> <div class="key" onclick="generate_sound(9)"> <p>E</p> </div> <div class="keyup" onclick="generate_sound(10)"> </div> <div class="key keyend" onclick="generate_sound(11)"> <p>F</p> </div> <div class="keyup keyupend" onclick="generate_sound(12)"> </div> </div> </div><script src="script.js"></script></body></html>this is style.css
body{ background-color: black; } .main{ display: flex; height: 100vh; background-color: black; flex-direction: column; align-items: center; justify-content: center; } .header{ height: 50px; width: 90%; background-color: rgb(65, 65, 65); color: aliceblue; margin: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #ffff; } .header p{ font-size: 1.5rem; } .screen{ background-color: rgb(44, 44, 44); padding: 5px; border-radius: 5px; border: 1px solid #ffff; height: 50px; width: 200px; display: flex; justify-content: center; align-items: center; } .screen p{ font-size: .8rem; } .contents{ height: 150px; width: 90%; background-color: rgb(168, 168, 168); margin: 20px; display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #ffff; } .key{ background-color: aliceblue; height: 70px; width: 40px; border: 1px solid black; display: flex; justify-content: center; align-items: end; } .key p{ margin-bottom: 5px; } .keyend{ width: 35px; } .key:hover{ background-color: rgb(255, 145, 0); } .keyup{ background-color: black; height: 35px; width: 15px; margin-top: -35px; margin-left: -20px; z-index: 2; } .keyupend{ margin-left: -15px; } .keyup:hover{ background-color: rgb(95, 95, 95); }This is script.js
var sounds= [280,300,320,340,360,380,400,420,440,460,480,500,520];var context =new (window.AudioContext || window.webkitAudioContext)();function generate_sound(nota){var osc = context.createOscillator();osc.type = 'square';osc.frequency.value=sounds[nota];osc.connect(context.destination);osc.start();osc.stop(context.currentTime + .3);}Original Link: https://dev.to/mjb/piano-html-css-javascript-1p3b
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To