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.