Instantly visualize harmonic series, pitch frequencies, and valve combinations for brass instruments. A free online music theory tool for brass musicians.
AI Generation Prompt
Brass Instrument Harmonic Series & Valve Combination Visualizer
Overview
This single-file web application serves as an interactive, pedagogical utility for brass musicians to visualize the relationship between valve combinations, tubing length, and the resulting harmonic series. It features a clean, professional, light-mode interface designed for quick reference during practice sessions.
Technical Architecture
- Single File: All HTML5, CSS3, and Vanilla JavaScript are contained within a single file. No external dependencies requiring a build step.
- Storage Constraints: The app uses zero storage (no localStorage, cookies, or session storage) to ensure compatibility with sandboxed iframe environments.
- Performance: Lightweight and responsive, utilizing CSS Flexbox and Grid for layout management.
UI/UX Design
- Color Palette: Professional SaaS aesthetic using white (
#ffffff), soft grays (#f1f5f9), and vibrant primary blue (#2563eb) for action buttons. Text is dark slate (#1e293b) for high readability. - Responsiveness: Fluid layout that transitions from a side-by-side view on desktops to a stacked, single-column view on mobile devices.
- Visuals: SVG-based graphing area to display the harmonic series partials. Interactive sliders and dropdown menus for selecting instruments and valve positions.
Feature Specifications
1. Instrument Selector
- Dropdown menu to choose: Trumpet (Bb), French Horn (F), Trombone (Bb), Euphonium (Bb), and Tuba (Bb/CC/EEb).
- Automatic transposition logic based on the selected instrument.
2. Valve/Slide Input
- Interactive visual buttons for valves 1, 2, and 3. Clicking combinations toggles them active/inactive.
- Trombone slide position selector (1st through 7th position).
3. Harmonic Series Graph
- A dynamic chart visualizing the fundamental frequency and the first 12 partials.
- Each partial indicates the note name (e.g., C4, G4) and the deviation in cents compared to modern 12-TET (equal temperament).
- Hover effects reveal precise frequency in Hertz (Hz) for each partial.
4. Audio Feedback
- Integrated Web Audio API oscillator to play the calculated frequency.
- 'Play' button for each partial allows the user to hear the target pitch.
- Smooth attack/release envelope to prevent clicking sounds during playback.
Interaction Details
- Animations: Subtle fade-in transitions when selecting a new instrument. Scale-up micro-interactions on valve button clicks to provide tactile feedback without complex UI frameworks.
- Responsive Sizing: The SVG chart automatically rescales width to fit the container without overflowing, ensuring usability on all screen sizes.
Development Directives
- No Popups: Do not use
alert(),confirm(), orprompt(). All notifications or errors must be rendered as native HTML modal components. - External Links: All documentation or educational resources must be opened via
target="_blank"andrel="noopener noreferrer". - Styling: Use clean, modern system fonts (Inter or system-ui). Avoid decorative borders; use soft box-shadows to define sections.
- State Management: Keep all application state in a simple JS object (e.g.,
const state = { instrument: 'trumpet', valves: [0, 0, 0] }) and use a single render function to update the DOM.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the brass harmonic series visualizer work?
This tool uses the physics of standing waves in air columns to calculate the overtone series for common brass instruments. By selecting your instrument and valve combination, the application applies the appropriate tubing length changes to the fundamental frequency to determine the theoretical pitch and harmonic partials. The calculation logic identifies the fundamental frequency based on the instrument's key and length, then computes the integer multiples of that frequency. This provides an accurate representation of the note, cent deviation from equal temperament, and the corresponding harmonic partial position, helping musicians understand the physics behind their instrument's intonation.
Which brass instruments are supported by this calculator?
The visualizer currently supports the most common brass instruments including the trumpet, French horn, trombone, euphonium, and tuba. Each instrument profile includes specific presets for key (e.g., Bb, F, Eb, C) and valve or slide configurations, ensuring the results are relevant to the specific instrument you are playing. We focus on these standard configurations to provide clear, pedagogical data for students and educators. If you are playing a non-standard custom instrument, you can still use the manual valve/slide inputs to approximate the tubing length changes required to find your target pitch and harmonic overtone.
Can this tool help with intonation and ear training?
Yes, this application is designed to be an effective tool for ear training and intonation practice. By visualizing the harmonic series, musicians can better understand the naturally sharp and flat partials inherent in the overtone series, which allows for more informed slide or valve adjustments during performance. The visual interface displays the pitch deviation in cents, which helps players identify exactly which partials require physical adjustment to match equal temperament. Regularly using this tool can help internalize these adjustments, ultimately leading to improved pitch control and more accurate intonation across the entire range of the instrument.
Does this tool require internet or local storage access?
This web application is designed to run entirely in your browser without requiring a server-side connection or storage permissions. It is a single-file application, meaning all logic, styles, and assets are contained within one HTML file, which ensures fast load times and security. Furthermore, because the tool is built without using localStorage, cookies, or IndexedDB, it is fully compatible with sandboxed iframe environments where browser storage APIs are restricted. Your settings and selections exist only in the application's volatile memory and will reset upon refreshing the page, ensuring total privacy and security.
