Pianoplayer 🎹

🎬 Демонстрация работы

🖥 Демо

🔗 Открыть приложение

Project Description

Pianoplayer is an interactive web application that allows users to play a virtual piano, record their performances, and replay them. It also supports importing and exporting recordings in JSON format.

Features 🚀

🎼 Interactive Mode:

• Virtual keyboard with mouse and keyboard support
• Sound generation using the Web Audio API
• Key highlighting when pressed
• Performance recording (including key press and release timing)
• Export recordings in JSON format
• Visual feedback during recording

🎵 Playback Mode:

• Load recorded or pre-configured melodies (JSON format)
• Play with visual indication of pressed keys
• Adjustable playback speed
• Playback controls (play, pause, stop, rewind)

Technologies 🛠

• HTML/CSS — Structure and styling
• JavaScript — Application logic
• Web Audio API — Sound generation
• File System API — Reading and saving JSON files
• JSON — Storage format for recordings

Requirements 📌

• ❌ No external libraries or CDNs
• ✅ Pure JavaScript (no jQuery, React, etc.)
• ⚠️ Code follows ESLint standards
• ⚡ Runs without console errors
• 🎹 19 white and 13 black keys (32 keys total, minimum 2 octaves)
• 🔊 Supports polyphony
• 🖥 Runs via Live Server (no separate domain required)

Code Validation ✅

• Run the linter:

  npm run lint
  npm run lint:fix

• Validate HTML and CSS:
  • HTML Validator
  • CSS Validator

JSON File Structure 📄

{
  "name": "My Song",
  "duration": 12500,
  "notes": [
    {
      "key": "C4",
      "startTime": 0,
      "duration": 500
    },
    {
      "key": "E4",
      "startTime": 500,
      "duration": 1000
    }
  ]
}

Getting Started 🏁

1. Open index.html in a browser.
2. Play the piano using a keyboard or mouse.
3. Record your performance and download it as a JSON file.
4. Load and replay recordings.

Useful Links 📚

• MDN Web Audio API
• File System Access API
• JavaScript Timing Events
• Piano Sounds with Web Audio API