MusicTheoryHTML
No description available
Install / Use
/learn @japrogramer/MusicTheoryHTMLREADME
Interactive Music Theory Dashboard
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.
Features
Interactive Piano:
- 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.
Dynamic Data Tables:
- 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.
Circle of Fifths:
- 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.
Common Progressions:
- A curated list of popular chord progressions with explanations and playable examples.
Chord Substitutions:
- Learn about various chord substitution techniques with descriptions and playable examples.
Audio Playback:
- All interactive elements (piano keys, intervals, scales, modes, chords, progressions, substitutions) have associated audio playback using the Tone.js library.
Theme Switching:
- Toggle between light and dark themes for a comfortable viewing experience.
Responsive Design:
- The layout adapts to different screen sizes, from mobile to desktop.
Technologies Used
- 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.
How to Use
- 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.
Project Structure
- 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.
Customization
- 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).
Contributing
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.
Related Skills
node-connect
352.9kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
111.5kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
352.9kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
352.9kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
