88-Key Piano Song Player with Audio Playback – HTML, CSS & JavaScript
Introduction
Are you looking for a fully functional 88-key piano built with HTML, CSS, and JavaScript? This project allows users to play piano notes using web-based sound synthesis and includes a song player feature to play predefined musical notes. The interactive interface makes it easy to simulate a real piano keyboard on any device.
Features
✅ 88-Key Piano Simulation – Replicates all keys from A0 to C8
✅ Real-Time Audio Playback – Uses Web Audio API to generate sound
✅ Song Player Functionality – Plays predefined songs dynamically
✅ Play & Pause Controls – Toggle between playing and pausing songs
✅ Interactive UI – Includes progress bar, timing display, and key animations
Technologies Used
HTML – For structuring the piano layout
CSS – For designing the keyboard and animations
JavaScript – For handling sound generation, song playback, and UI interactions
Web Audio API – To synthesize piano sounds dynamically
How It Works
Play Individual Notes – Click on any key to hear its sound
Play a Song – Select a predefined song, and the system will play it using the correct notes and timing
⏸️ Pause & Resume – Stop and continue playback while tracking progress
Code Snippet
Here’s the source code for the 88-key piano with song playback:
Why Use This Piano Player?
This project is perfect for music enthusiasts, web developers, and students who want to build an interactive piano web application. It demonstrates the power of the Web Audio API and JavaScript event handling.
Live Demo
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Piano Song Player</title>
</head>
<body>
<h1>88-Key Piano</h1>
<div class="piano" id="piano"></div>
<h2>My Audio Player</h2>
<!-- <div id="songList"></div> -->
<div class="song-controls">
<div class="song-info">
<span class="current-time">0:00</span> / <span class="total-time">0:00</span>
</div>
<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>
<div class="song-list"></div>
<script src="srcipt.js"></script>
</body>
</html>CSS Code
body {
text-align: center;
background: #222;
color: white;
font-family: Arial, sans-serif;
}
.piano {
display: flex;
justify-content: center;
align-items: flex-end;
padding: 20px;
}
.key {
height: 200px;
width: 24px;
margin: 0 2px;
border-radius: 5px;
cursor: pointer;
user-select: none;
display: inline-block;
transition: transform 0.1s ease, filter 0.1s ease;
}
.white {
background: white;
border: 1px solid #000;
height: 250px;
width: 30px;
}
.black {
background: black;
height: 150px;
width: 20px;
margin-bottom: 102px;
margin-left: -12px;
margin-right: -12px;
z-index: 1;
}
.key:active {
transform: scale(0.95);
filter: brightness(80%);
}
.key.active {
transform: scale(0.95);
filter: brightness(80%);
}
.pressed {
transform: scale(0.95);
filter: brightness(80%);
}
.song-list {
margin-top: 20px;
}
.song-button {
background-color: #444;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
cursor: pointer;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.song-button:hover {
background-color: #666;
}
.play-pause-icon {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.progress-container {
width: 300px;
margin: 10px auto;
background: #444;
height: 8px;
border-radius: 4px;
overflow: hidden;
display: none;
}
.progress-bar {
width: 0%;
height: 100%;
background: #4CAF50;
transition: width 0.1s linear;
}
.song-info {
margin: 5px 0;
font-size: 14px;
display: none;
}
.song-controls {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0;
}
JavaScript Code
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let currentlyPlaying = null;
let isPaused = false;
let timeoutIds = [];
let progressInterval = null;
let startTime = 0;
let totalDuration = 0;
const pianoKeys = [
"A0", "A#0", "B0", "C1", "C#1", "D1", "D#1", "E1", "F1", "F#1", "G1", "G#1",
"A1", "A#1", "B1", "C2", "C#2", "D2", "D#2", "E2", "F2", "F#2", "G2", "G#2",
"A2", "A#2", "B2", "C3", "C#3", "D3", "D#3", "E3", "F3", "F#3", "G3", "G#3",
"A3", "A#3", "B3", "C4", "C#4", "D4", "D#4", "E4", "F4", "F#4", "G4", "G#4",
"A4", "A#4", "B4", "C5", "C#5", "D5", "D#5", "E5", "F5", "F#5", "G5", "G#5",
"A5", "A#5", "B5", "C6", "C#6", "D6", "D#6", "E6", "F6", "F#6", "G6", "G#6",
"A6", "A#6", "B6", "C7", "C#7", "D7", "D#7", "E7", "F7", "F#7", "G7", "G#7",
"A7", "A#7", "B7", "C8"
];
function playPianoSound(frequency) {
if (audioCtx.state === 'suspended') {
audioCtx.resume();
}
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(frequency, audioCtx.currentTime);
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
oscillator.start();
oscillator.stop(audioCtx.currentTime + 1);
}
function getFrequency(index) {
const A4 = 440;
return A4 * Math.pow(2, (index - 49) / 12);
}
function createPiano() {
const piano = document.getElementById("piano");
const whiteKeys = [0, 2, 4, 5, 7, 9, 11];
const totalKeys = 88;
for (let i = 0; i < totalKeys; i++) {
let key = document.createElement("div");
key.classList.add("key");
if (whiteKeys.includes(i % 12)) {
key.classList.add("white");
} else {
key.classList.add("black");
}
key.dataset.index = i;
key.addEventListener("mousedown", () => playPianoSound(getFrequency(i)));
piano.appendChild(key);
}
}
const songs = [
{
id: 'harry-potter',
title: 'Harry Potter Theme',
notes: [
{ note: 'B4', duration: 0.4, section: 'Intro' },
{ note: 'E5', duration: 0.6, section: 'Intro' },
{ note: 'G5', duration: 0.4, section: 'Intro' },
{ note: 'F#5', duration: 0.4, section: 'Intro' },
{ note: 'E5', duration: 0.8, section: 'Intro' },
{ note: 'B5', duration: 0.4, section: 'Intro' },
{ note: 'A5', duration: 1, section: 'Intro' },
{ note: 'F#5', duration: 1, section: 'Intro' },
{ note: 'E5', duration: 0.8, section: 'Intro' },
{ note: 'G5', duration: 0.4, section: 'Intro' },
{ note: 'F#5', duration: 0.4, section: 'Intro' },
{ note: 'Eb5', duration: 1, section: 'Intro' },
{ note: 'F5', duration: 0.4, section: 'Intro' },
{ note: 'B4', duration: 1, section: 'Intro' },
{ note: 'E5', duration: 1, section: 'Intro' },
{ note: 'G5', duration: 0.4, section: 'Intro' },
{ note: 'F#5', duration: 0.4, section: 'Intro' },
{ note: 'E5', duration: 1, section: 'Intro' },
{ note: 'B5', duration: 0.4, section: 'Intro' },
{ note: 'D6', duration: 1, section: 'Intro' },
{ note: 'Db6', duration: 0.4, section: 'Intro' },
{ note: 'C6', duration: 1, section: 'Intro' },
{ note: 'Ab5', duration: 0.4, section: 'Intro' },
{ note: 'C6', duration: 1, section: 'Intro' },
{ note: 'B5', duration: 0.4, section: 'Intro' },
{ note: 'Bb5', duration: 0.4, section: 'Intro' },
{ note: 'Bb4', duration: 1, section: 'Intro' },
{ note: 'G5', duration: 0.4, section: 'Intro' },
{ note: 'E5', duration: 1, section: 'Intro' }
]
},
{
id: 'twinkle',
title: 'Twinkle Twinkle Little Star',
notes: [
{ note: 'C5', duration: 0.5, section: 'Verse 1' },
{ note: 'C5', duration: 0.5, section: 'Verse 1' },
{ note: 'G5', duration: 0.5, section: 'Verse 1' },
{ note: 'G5', duration: 0.5, section: 'Verse 1' },
{ note: 'A5', duration: 0.5, section: 'Verse 1' },
{ note: 'A5', duration: 0.5, section: 'Verse 1' },
{ note: 'G5', duration: 1, section: 'Verse 1' },
// Verse 2
{ note: 'F5', duration: 0.5, section: 'Verse 2' },
{ note: 'F5', duration: 0.5, section: 'Verse 2' },
{ note: 'E5', duration: 0.5, section: 'Verse 2' },
{ note: 'E5', duration: 0.5, section: 'Verse 2' },
{ note: 'D5', duration: 0.5, section: 'Verse 2' },
{ note: 'D5', duration: 0.5, section: 'Verse 2' },
{ note: 'C5', duration: 1, section: 'Verse 2' },
// Verse 3 (same as Verse 1)
{ note: 'C5', duration: 0.5, section: 'Verse 3' },
{ note: 'C5', duration: 0.5, section: 'Verse 3' },
{ note: 'G5', duration: 0.5, section: 'Verse 3' },
{ note: 'G5', duration: 0.5, section: 'Verse 3' },
{ note: 'A5', duration: 0.5, section: 'Verse 3' },
{ note: 'A5', duration: 0.5, section: 'Verse 3' },
{ note: 'G5', duration: 1, section: 'Verse 3' },
// Verse 4 (same as Verse 2)
{ note: 'F5', duration: 0.5, section: 'Verse 4' },
{ note: 'F5', duration: 0.5, section: 'Verse 4' },
{ note: 'E5', duration: 0.5, section: 'Verse 4' },
{ note: 'E5', duration: 0.5, section: 'Verse 4' },
{ note: 'D5', duration: 0.5, section: 'Verse 4' },
{ note: 'D5', duration: 0.5, section: 'Verse 4' },
{ note: 'C5', duration: 1, section: 'Verse 4' }
]
},
{
id: 'random',
title: 'random',
notes: [
{ note: 'C5', duration: 1, section: 'Verse 1' },
{ note: 'D5', duration: 0.5, section: 'Verse 1' },
{ note: 'E5', duration: 1, section: 'Verse 1' },
{ note: 'F5', duration: 0.5, section: 'Verse 1' },
{ note: 'G5', duration: 1, section: 'Verse 1' },
]
},
{
id: 'fur-elise',
title: 'Fur Elise',
notes: [
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.5, section: 'Intro' },
{ note: '', duration: 0.25, section: 'Intro' },
{ note: 'C4', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.4, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'G#4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.2, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.15, section: 'Intro' },
{ note: 'C4', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.4, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.2, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.15, section: 'Intro' },
{ note: 'C4', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.4, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'G#4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.2, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D#5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.15, section: 'Intro' },
{ note: 'C4', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.4, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'A4', duration: 0.4, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.4, section: 'Intro' },
{ note: 'G4', duration: 0.25, section: 'Intro' },
{ note: 'G4', duration: 0.25, section: 'Intro' },
{ note: 'F5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.15, section: 'Intro' },
{ note: 'F4', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.4, section: 'Intro' },
{ note: '', duration: 0.15, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.4, section: 'Intro' },
{ note: 'D5', duration: 0.25, section: 'Intro' },
{ note: 'E4', duration: 0.25, section: 'Intro' },
{ note: 'A5', duration: 0.4, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'C5', duration: 0.25, section: 'Intro' },
{ note: 'E5', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
{ note: 'B4', duration: 0.25, section: 'Intro' },
]
}
];
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
function updateProgressBar() {
if (!isPaused && currentlyPlaying) {
const currentTime = (Date.now() - startTime) / 1000;
const progress = (currentTime / totalDuration) * 100;
document.querySelector('.progress-bar').style.width = `${Math.min(progress, 100)}%`;
document.querySelector('.current-time').textContent = formatTime(currentTime);
}
}
function clearTimeouts() {
timeoutIds.forEach(id => clearTimeout(id));
timeoutIds = [];
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.classList.remove('pressed'));
// Clear progress bar interval
if (progressInterval) {
clearInterval(progressInterval);
progressInterval = null;
}
}
function calculateTotalDuration(notes) {
return notes.reduce((total, note) => total + note.duration, 0);
}
function playSong(notes, button) {
const progressContainer = document.querySelector('.progress-container');
const songInfo = document.querySelector('.song-info');
if (currentlyPlaying === button && !isPaused) {
// Pause the song
isPaused = true;
clearTimeouts();
updatePlayPauseIcon(button, true);
return;
}
if (currentlyPlaying && currentlyPlaying !== button) {
// Stop previous song
clearTimeouts();
updatePlayPauseIcon(currentlyPlaying, true);
}
if (isPaused && currentlyPlaying === button) {
// Resume the song
isPaused = false;
startTime = Date.now() - (parseFloat(document.querySelector('.progress-bar').style.width) / 100 * totalDuration * 1000);
updatePlayPauseIcon(button, false);
progressInterval = setInterval(updateProgressBar, 100);
} else {
// Start new song
currentlyPlaying = button;
isPaused = false;
updatePlayPauseIcon(button, false);
// Reset and show progress bar
totalDuration = calculateTotalDuration(notes);
document.querySelector('.progress-bar').style.width = '0%';
document.querySelector('.total-time').textContent = formatTime(totalDuration);
document.querySelector('.current-time').textContent = '0:00';
progressContainer.style.display = 'block';
songInfo.style.display = 'block';
startTime = Date.now();
progressInterval = setInterval(updateProgressBar, 100);
}
let currentTime = 0;
notes.forEach((noteData, index) => {
const noteIndex = pianoKeys.indexOf(noteData.note);
const key = document.querySelector(`[data-index="${noteIndex}"]`);
const playTimeout = setTimeout(() => {
if (!isPaused) {
key.classList.add('pressed');
playPianoSound(getFrequency(noteIndex));
}
}, currentTime);
const releaseTimeout = setTimeout(() => {
if (!isPaused) {
key.classList.remove('pressed');
}
}, currentTime + noteData.duration * 1000);
timeoutIds.push(playTimeout, releaseTimeout);
currentTime += noteData.duration * 1000;
});
// Reset after song ends
const endTimeout = setTimeout(() => {
if (currentlyPlaying === button) {
currentlyPlaying = null;
isPaused = false;
updatePlayPauseIcon(button, true);
clearInterval(progressInterval);
progressContainer.style.display = 'none';
songInfo.style.display = 'none';
}
}, currentTime);
timeoutIds.push(endTimeout);
}
function createPlayIcon() {
return `<svg class="play-pause-icon" viewBox="0 0 24 24">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>`;
}
function createPauseIcon() {
return `<svg class="play-pause-icon" viewBox="0 0 24 24">
<rect x="6" y="4" width="4" height="16"></rect>
<rect x="14" y="4" width="4" height="16"></rect>
</svg>`;
}
function updatePlayPauseIcon(button, isPlay) {
const iconContainer = button.querySelector('.icon-container');
iconContainer.innerHTML = isPlay ? createPlayIcon() : createPauseIcon();
}
function createSongButtons() {
const songList = document.querySelector('.song-list');
songList.innerHTML = '';
songs.forEach(song => {
const button = document.createElement('button');
button.className = 'song-button';
button.innerHTML = `
<span class="icon-container">${createPlayIcon()}</span>
<span>${song.title}</span>
`;
button.onclick = () => playSong(song.notes, button);
songList.appendChild(button);
});
}
createPiano();
createSongButtons();
PHP Code
NO Need
Frequently Asked Questions (FAQ)
1. What is an 88-Key Piano Player?
An 88-key piano player is a digital version of a real piano that allows users to play notes, generate sounds, and play predefined songs using JavaScript and the Web Audio API.
2. How does this JavaScript piano work?
This piano uses HTML for structure, CSS for design, and JavaScript to trigger sounds when you click on a key. It also features a song playback function that plays notes automatically.
3. Can I add my own songs to the player?
Yes! You can modify the JavaScript code to add your own songs by defining an array of note sequences with corresponding timing data.
4. Does this piano work on mobile devices?
Yes, the project is fully responsive and works on mobile, tablet, and desktop devices. You can play it using touch or mouse clicks.
5. Is this JavaScript piano open-source?
Absolutely! You can download, modify, and use the code to create your own interactive piano project.
Conclusion
This JavaScript piano project is a great starting point for building interactive music applications. You can customize it further by adding more songs, improving the UI, or integrating MIDI support. Let me know your thoughts in the comments! What features would you like to add to this project? Share your ideas below!