Skip to content

Latest commit

 

History

History
70 lines (45 loc) · 1.93 KB

README.md

File metadata and controls

70 lines (45 loc) · 1.93 KB
Raw

Project Title

JavaScript Piano


Description

A simple, interactive piano built with JavaScript and CSS.

Preview

https://htmlpreview.github.io/?https://github.com/AliDeli80/Piano/blob/master/html/index.html

Getting Started

Clone the Repository:

git clone https://github.com/AliDeli80/Piano.git

How to Play

  • Keyboard: Press the corresponding keys on your keyboard to play notes.
  • Mouse: Hover on the piano to see what key to press.

How It Works

HTML Structure:

  • Creates a piano keyboard using HTML div elements to represent keys.
  • Adds data attributes to each key, indicating the corresponding keyboard key.

CSS Styling:

  • Styles the piano keys, giving them a realistic appearance.
  • Uses CSS transitions and animations to create key press and hover effects.

JavaScript Logic:

  • Assigns sound files to each key.
  • Detects keypresses.
  • Plays the corresponding sound when a key is pressed.
  • Adds visual feedback, such as key highlighting and animation, to indicate which key is being played.
  • Uses JavaScript to show key hints on hover, displaying the corresponding keyboard key above each piano key.

Feature

  • Polyphony: Allow multiple notes to be played simultaneously.

Customization

  • Sound: You can replace the sound files with your own.
  • Key Layout: Modify the HTML structure to change the piano layout.
  • Styling: Customize the appearance of the piano using CSS.
  • Animations: Adjust the CSS animations to create different visual effects.
  • Key Hints: Modify the JavaScript code to customize the appearance and behavior of the key hints.

Contributing

  1. Fork the repository.
  2. Create a new branch for your feature or bug fix.
  3. Make your changes.
  4. Commit your changes with clear commit messages.
  5. Push your branch to your forked repository.
  6. Create a pull request to the main repository.  

License

This project is licensed under the MIT License.