Skip to content

A fun little piano forked and refactored with VueJS implementation! Click the keys or use your keyboard to play notes ๐ŸŽถ

Notifications You must be signed in to change notification settings

NacreousDawn596/virtual-piano

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

39 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽน Virtual Piano

A beautiful, interactive virtual piano with floating baby pink hearts and aesthetic decorations. Play music using your keyboard or mouse clicks with a clean, calming design.

Virtual Piano Preview HTML CSS JavaScript

โœจ Features

  • ๐ŸŽต 21 Piano Keys - Extended keyboard with 3 octaves
  • ๐Ÿ’• Floating Hearts - Baby pink hearts that appear when playing
  • ๐ŸŽจ Aesthetic Design - Clean, calm, and beautiful interface
  • ๐ŸŽน Dual Input - Play with mouse clicks or keyboard
  • ๐ŸŽผ Demo Song - Built-in "Twinkle Twinkle Little Star" demo
  • ๐Ÿ“ฑ Responsive Design - Works on desktop, tablet, and mobile
  • ๐Ÿ”Š Web Audio API - High-quality sound generation
  • ๐ŸŒธ Decorative Elements - Subtle particles and wave animations
  • ๐ŸŽ›๏ธ Control Panel - Toggle labels, hearts, and play demo

๐ŸŽฎ How to Play

Keyboard Controls

First Octave:

  • White Keys: A, S, D, F, G, H, J
  • Black Keys: W, E, T, Y, U

Second Octave:

  • White Keys: K, L, Z, X, C, V, B, N, M, ,
  • Black Keys: I, 1, 2, 3, 4, 5, 6

Third Octave:

  • White Keys: Q, W, R
  • Black Keys: 7, 8

Mouse Controls

Simply click on any piano key to play the corresponding note.

๐Ÿš€ Installation

  1. Clone the repository:
  2. Run the index.html file on ur browser

About

A fun little piano forked and refactored with VueJS implementation! Click the keys or use your keyboard to play notes ๐ŸŽถ

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 54.4%
  • CSS 35.9%
  • HTML 9.7%