Want to surprise someone with a creative coding gift? 🎂
This “Happy Birthday Music” project lets you play the classic birthday tune directly from your browser!
It uses HTML, CSS, and pure JavaScript to generate the melody using the Web Audio API, along with colorful animations on a canvas background.
Perfect for beginners who want to learn sound programming while making something joyful.
Project Features
- Plays the full “Happy Birthday” tune using JavaScript
- Animated colorful background using HTML5 Canvas
- Interactive text animation synced with the music
- Speed control slider to change tempo in real-time
- Made entirely with HTML, CSS, and vanilla JavaScript – no libraries required!
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday Music</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<div id="pleaseClick">Please click here<br><span>☟</span></div>
<div id="wishes">
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p class="control">
<label for="inputSpeed"></label><br>
<input type="range" id="inputSpeed" min="0.1" max="2" step="0.1" value="0.5">
</p>
</div>
<script src="./script.js"></script>
</body>
</html>
JavaScript Code
// Save this file as script.js
// Generates the "Happy Birthday" tune with Web Audio API
// and displays animated text for each lyric.
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const notes = [
{f:262,d:.5,t:"Hap",p:p1}, {f:262,d:.5,t:"py ",p:p1},
{f:294,d:1,t:"Birth",p:p1}, {f:262,d:1,t:"day ",p:p1},
{f:349,d:1,t:"To ",p:p1}, {f:330,d:2,t:"You",p:p1},
// (rest of the melody continues...)
];
// Create spans for each lyric
notes.map((n) => {
n.sp = document.createElement("span");
n.sp.innerHTML = n.t;
n.p.appendChild(n.sp);
});
// Class for generating each note
class Sound {
constructor(freq, dur, i) {
this.frequency = freq;
this.dur = dur;
this.index = i;
this.sp = notes[i].sp;
}
play() {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = "triangle";
osc.frequency.value = this.frequency;
gain.gain.value = 0.15;
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
this.sp.classList.add("jump");
osc.stop(audioCtx.currentTime + this.dur);
}
}
CSS Code
/* Save this file as style.css */
body {
height: 100vh;
background-image: radial-gradient(#374566, #010203);
color: #ccc;
font-family: Raleway, sans-serif;
text-align: center;
}
canvas {
position: absolute;
z-index: -1;
top: 0;
}
#wishes {
width: 20em;
margin: calc(50vh - 6.7em) auto;
background: hsla(210, 50%, 15%, 0.75);
border: 1px dotted;
}
span.jump {
animation: jump 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 2 alternate;
}
@keyframes jump {
to { transform: translateY(-0.7em); }
}
Download Project Files
Please wait 30 seconds to unlock the download link…
Conclusion
This Happy Birthday Music project is a wonderful way to mix coding with creativity.
It’s simple, musical, and fun — you’ll learn about the Web Audio API, animations, and event handling all at once.
You can even customize the notes, change the visuals, or display your friend’s name for a personalized touch! 🎈
