This is a single-page HTML application designed to be an interactive dashboard for exploring fundamental music theory concepts. It features an interactive piano, tables for intervals, scales, modes, chords, and sections for common progressions and chord substitutions, all with playable audio examples.
- Clickable piano keys to play individual notes.
- Keyboard support (QWERTY layout: A,W,S,E,D,F,T,G,Y,H,U,J,K for C major octave) for playing notes.
- Visual highlighting of active notes.
- Intervals & Degrees: Explore different musical intervals, their half-step count, symbols, degrees, and functions. Each interval can be played.
- Scales: Learn about various scales (Major, Minor, Pentatonic, Japanese, etc.), their formulas, and explanations. Playable examples demonstrate the sound of each scale.
- Modes: Discover the different modes of the major scale with examples and playable demonstrations.
- Chords: A comprehensive list of chords categorized by type (Major, Minor, Dominant, Altered, Add/Sus, Diminished/Augmented), including their symbols, formulas, and structures. Each chord can be played.
- An interactive SVG representation of the Circle of Fifths.
- Click on major or minor keys to hear their respective scales played.
- Visual indication of the currently playing key.
- A curated list of popular chord progressions with explanations and playable examples.
- Learn about various chord substitution techniques with descriptions and playable examples.
- All interactive elements (piano keys, intervals, scales, modes, chords, progressions, substitutions) have associated audio playback using the Tone.js library.
- Toggle between light and dark themes for a comfortable viewing experience.
- The layout adapts to different screen sizes, from mobile to desktop.
- HTML5: Structure of the web page.
- CSS3: Styling, including custom properties for theme management.
- Tailwind CSS (CDN): Utility-first CSS framework for rapid styling and responsiveness.
- JavaScript (ES6+): Core logic for interactivity, data handling, and audio playback.
- Tone.js: A web audio framework used for synthesizing and playing musical notes.
- Google Fonts (Inter): For modern and legible typography.
- Open
index.html: Simply open theindex.htmlfile in your web browser. No local server or build process is required. - Explore Sections: Navigate through the different sections of the dashboard to learn about various music theory concepts.
- Play Audio Examples:
- Piano: Click on the piano keys or use your QWERTY keyboard (
A,W,S,E,D,F,T,G,Y,H,U,J,Kfor C major octave) to play individual notes. - Tables & Lists: Click the "Play" button next to any interval, scale, mode, chord, progression, or substitution example to hear it. Clicking anywhere on a table row (except the play button) or list item will also trigger playback for that entry.
- Circle of Fifths: Click on any major or minor key name within the circle to hear its corresponding scale.
- Piano: Click on the piano keys or use your QWERTY keyboard (
- Stop Playback: Clicking the "Play" button (which changes to "Playing..." during playback) again, or clicking on another playable element, will stop the current audio.
- Toggle Theme: Use the sun/moon icon in the header to switch between light and dark modes.
- The project consists of a single
index.htmlfile, which includes all HTML, CSS, and JavaScript. <head>: Contains metadata, links to external libraries (Tailwind CSS, Tone.js, Google Fonts), and inline<style>for custom CSS and theme variables.<body>: Contains the main layout and content of the dashboard.<script>: At the end of the<body>, contains all the JavaScript logic for data, audio playback, DOM manipulation, and event listeners.
- Data: The
musicDataJavaScript object contains all the information for intervals, scales, modes, chords, progressions, and substitutions. You can modify this data to add, remove, or change content. - Styling: The inline
<style>block at the top ofindex.htmldefines custom CSS variables for colors and includes additional rules. You can adjust these variables or add more custom CSS to change the appearance. Tailwind CSS utility classes are used extensively in the HTML for layout and component styling. - Audio: The
Tone.PolySynthconfiguration in the JavaScript can be adjusted to change the sound of the notes (e.g.,oscillator: { type: "triangle" }, envelope parameters).
As this is a self-contained single HTML file, direct contributions via pull requests are not typically applicable. However, if you have suggestions for improvements or find any issues, feel free to open an issue.