Technical Specification: Free Online Guitar Tablature Maker & Audio Player

Overview

A high-fidelity, client-side browser application for musicians to compose, edit, and listen to guitar tablature. This tool acts as a dedicated workspace for guitarists to capture musical ideas quickly without the bloat of traditional DAW software.

Core Features

• Interactive Tablature Grid: A six-line visual representation of the guitar fretboard. Users can click on strings and type fret numbers to input notes.
• Web Audio Playback: Uses the Web Audio API (OscillatorNode/GainNode) to synthesize guitar-like pluck sounds, allowing users to hear their composition in real-time.
• Dynamic Duration Control: Tools to toggle between note durations (whole, half, quarter, eighth, sixteenth) to ensure correct rhythmic spacing.
• Export/Import Functionality: Since local storage is blocked, users can export their work to a downloadable .tab (JSON format) file and import it back later.
• Standard Tuning Presets: Quick buttons to initialize the grid to Standard (E A D G B E), Drop D, or Open G tunings.

User Interface Layout

• Header Section: Centered application title with secondary actions (Clear Grid, Reset Tuning, Import/Export).
• Control Panel: A fixed-position ribbon featuring playback controls (Play, Stop, Tempo Slider, Volume) and note duration toggles.
• Workspace Area: A central, scrollable container representing the tablature staff. Rows are clearly defined with lines representing strings (E2, A2, D3, G3, B3, E4).
• Visual Feedback: Notes highlight upon playback. Active notes are highlighted with a soft primary color background for clear composition tracking.

Design System (Light Mode Only)

• Color Palette: Professional SaaS aesthetic using cool-neutral grays and a high-contrast accent color.
  • Background: #FFFFFF (Main) and #F8FAFC (Workspace Background).
  • Primary Accent: #3B82F6 (Action buttons, active selection).
  • Text: #1E293B (Primary), #64748B (Secondary).
  • Borders: #E2E8F0.
• Typography: Sans-serif, human-centered font (e.g., 'Inter' or system default 'Segoe UI', 'Roboto').
• Transitions: All buttons and interactive elements use transition: all 0.2s ease-in-out for a smooth, responsive feel.

Technical Implementation Constraints

• Single File: All HTML, CSS, and Vanilla JavaScript must be contained within a single .html file. CSS should be injected via <style> tags, JS via <script> tags.
• No Persistent Storage: Because the app operates in a sandboxed iframe, localStorage, sessionStorage, and Cookies are strictly prohibited. Application state must reside entirely in volatile memory variables.
• Browser-Based Audio: Use the Web Audio API for playback. Ensure the AudioContext is suspended until the user explicitly clicks the 'Play' button to comply with browser autoplay policies.
• Dependencies: Use CDNs for icons (e.g., FontAwesome) and utility CSS (Tailwind via CDN) to maintain the premium look without build steps.
• Responsive Behavior: The grid must utilize a fluid layout. On smaller screens, the tablature should introduce horizontal scrolling while maintaining the integrity of the 6-line staff.
• No Third-Party Bloat: Avoid large frameworks. Logic must be handled via ES6 classes or functional programming patterns in clean, vanilla JS.