This project creates an interactive “Happy Birthday” experience that combines music, animated text, and a dynamic canvas background. When the user clicks the wishes area, the Happy Birthday song plays note by note using the Web Audio API. Each lyric syllable jumps in sync with the music, creating a playful karaoke-style effect. A floating polygon particle animation runs continuously in the background. Overall, the project blends sound synthesis, DOM animation, and canvas graphics into a festive interactive greeting.
HTML
<canvas id="canvas"></canvas>The HTML structure is intentionally minimal and centered around interaction. A <canvas> element is placed in the background to render animated decorative particles. The #wishes container holds multiple paragraph elements where the birthday lyrics are displayed line by line. Each lyric is built dynamically using <span> elements so individual syllables can animate independently.
A “Please click here” prompt encourages user interaction, which is required to start audio playback due to browser policies. A range input slider allows the user to control playback speed in real time. IDs are used heavily to give JavaScript direct access to key elements. No visual elements are hard-coded into the canvas itself. The HTML focuses on structure, leaving animation and sound entirely to CSS and JavaScript. Overall, it provides a clean and interaction-ready layout.
CSS
span.jump {
animation: jump 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s 2 alternate;
}The CSS defines the visual mood and text animation behavior of the project. A dark radial gradient background gives the scene a soft, celebratory atmosphere. The canvas is positioned absolutely behind all content to act as a moving backdrop. Each lyric syllable animates using the .jump class, which lifts text upward in a spring-like motion when played.
Timing functions create a playful bounce effect rather than a stiff movement. The “Please click” message also uses animation to attract attention. Slider elements are fully custom-styled to match the theme. Transparency and subtle borders help the wishes panel stand out from the background. Typography and spacing enhance readability. Overall, CSS handles presentation and rhythmic visual feedback.
JavaScript
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();The JavaScript is the heart of this project, controlling sound, animation, and canvas rendering. The Web Audio API is used to synthesize musical notes dynamically instead of playing a prerecorded file. Each note object defines frequency, duration, lyric text, and target paragraph. A custom Sound class manages oscillator creation, gain control, and note sequencing. When a note plays, its corresponding text span receives the jump class for visual synchronization.
A speed slider updates note duration in real time. Event listeners ensure music starts only after user interaction. Separately, a particle system animates rotating polygon shapes on the canvas using requestAnimationFrame. Resize handling keeps the animation responsive. Overall, JavaScript orchestrates audio, text, and visuals into a synchronized celebration.
