Scribd
Upload
15 views2 pages

Interactive Piano Soundboard

The document is an HTML code for a simple piano web application that allows users to play musical notes by clicking on piano keys. It includes styling for the piano keys and functionality to play corresponding audio files for each note. The piano features both white and black keys, with event handlers to trigger sound playback when keys are clicked.

Uploaded by

hkumargautam79
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views2 pages

Interactive Piano Soundboard

The document is an HTML code for a simple piano web application that allows users to play musical notes by clicking on piano keys. It includes styling for the piano keys and functionality to play corresponding audio files for each note. The piano features both white and black keys, with event handlers to trigger sound playback when keys are clicked.

Uploaded by

hkumargautam79
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Piano</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #333;
}
.piano {
display: flex;
}
.key {
width: 60px;
height: 200px;
margin: 1px;
background: white;
border: 1px solid black;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
position: relative;
cursor: pointer;
user-select: none;
}
.key:active {
background: #ccc;
}
.black {
width: 40px;
height: 120px;
background: black;
position: absolute;
top: 0;
z-index: 2;
margin-left: -20px;
}
.black:active {
background: #555;
}
</style>
</head>
<body>
<div class="piano">
<div class="key" onclick="playSound('C')">C</div>
<div class="key" onclick="playSound('D')">D<div class="black"
onclick="playSound('C#')"></div></div>
<div class="key" onclick="playSound('E')">E<div class="black"
onclick="playSound('D#')"></div></div>
<div class="key" onclick="playSound('F')">F</div>
<div class="key" onclick="playSound('G')">G<div class="black"
onclick="playSound('F#')"></div></div>
<div class="key" onclick="playSound('A')">A<div class="black"
onclick="playSound('G#')"></div></div>
<div class="key" onclick="playSound('B')">B<div class="black"
onclick="playSound('A#')"></div></div>
</div>

<audio id="C" src="[Link]


<audio id="C#" src="[Link]
<audio id="D" src="[Link]
<audio id="D#" src="[Link]
<audio id="E" src="[Link]
<audio id="F" src="[Link]
<audio id="F#" src="[Link]
<audio id="G" src="[Link]
<audio id="G#" src="[Link]
<audio id="A" src="[Link]
<audio id="A#" src="[Link]
<audio id="B" src="[Link]

<script>
function playSound(note) {
const audio = [Link](note);
if (audio) {
[Link] = 0;
[Link]();
}
}
</script>
</body>
</html>

You might also like