# DETAILED SPECIFICATION FOR DAW MEDIA EXPLORER PANEL INTERFACE & HTML5 SOURCE CODE
This document details the design structure, features, and executable HTML5 source code for a general-purpose Media Explorer Panel interface styled after the REAPER DAW.
---
## I. DETAILED INTERFACE REGIONS
The interface is divided vertically into 3 primary functional regions, arranged from top to bottom:
### 1. Top Navigation Toolbar
* **Left Navigation Button Group:** **←** (Back), **→** (Forward), **↑** (Up to Parent Directory), **↻** (Refresh).
* **Directory Address Bar:** Displays the current folder path with a drop-down menu for quick-access path selection.
* **Filter / Search Box:** Input field supporting quick file filtering and keyword searching.
* **View Mode Button:** Toggle button for switching file display layouts (*Details* / *List* view).
### 2. Middle Split Panel (Directory Tree + File List)
* **Left Directory Tree View:**
* Hierarchical tree structure displaying project directories, system shortcuts, drives, and audio sample library folders.
* Supports expand/collapse toggle buttons and highlighted background states indicating the actively selected folder.
* **Right File List Table:**
* Displays audio and MIDI files with standard category icons.
* Highlights the currently selected file with a prominent blue row background.
### 3. Bottom Preview & Transport Panel
* **Transport Control Bar & Playback Parameters:**
* **Transport Buttons:** **■** (Stop), **▶** (Play), **❚❚** (Pause), **↻** (Loop/Repeat), **⚡ Auto-Play** (Automatically previews files upon selection).
* **Parameter Controls:** Pitch adjustment (Pitch matching), Rate (Playback speed factor), Volume Slider (Gain adjustment in dB).
* **Media Type Badge:** Label displaying file format classification (*MIDI* / *Audio*).
* **Visualizer Canvas Display & Metadata:**
* **Visualizer Canvas (Left):** Dark display area rendering an overview Piano Roll note grid (for MIDI files) or waveform display (for Audio files), integrated with a timeline/bar ruler and white Playhead cursor.
* **Metadata Text Box (Right):** Information pane displaying detailed file parameters (MIDI event count, duration, sample rate / resolution).
* **Footer Status Bar:**
* Displays current playback timestamp vs. total file length.
* Name of the currently selected/playing file.
* Tempo metadata (BPM) and playback rate scale factor.
---
## II. EXECUTABLE HTML5 & TAILWIND CSS SOURCE CODE
Below is the complete HTML5 source code integrating Web Audio API synthesis, a Canvas visualizer, and real-time interactive file selection and audio preview playback:
```html
DAW Media Explorer Panel Component