diff --git a/md/51_MEDIA_EXPLORER.md b/md/51_MEDIA_EXPLORER.md new file mode 100644 index 0000000..5d59b9a --- /dev/null +++ b/md/51_MEDIA_EXPLORER.md @@ -0,0 +1,349 @@ +# 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 + + + + + + + + +
+ + +
+
+ + + + + +
+ + + +
+
+ +
+
+ + +
+ +
+
+ + +
+ + +
+
+
<Track Templates>
+
<Project Directory>
+
My Computer
+ + +
+ + Media Library +
+ +
+
+ Sound Effects +
+
+ MIDI Collections +
+
+ +
Desktop
+
My Documents
+
+
+ + +
+ + + + + + + +
File
+
+ +
+ + +
+ + +
+
+ + + + + +
+ +
+
+ Pitch: +
+ +
+
+
+ Rate: +
+ +
+
+
+ +
+ Volume: + +
+ 0.00 dB +
+
+ +
+ MIDI +
+
+ + +
+
+ +
+ +
+
+ 76 MIDI events
+ Length: 16 quarter notes
+ Length: 0:08.000 (est)
+ Ticks per quarter note: 480 +
+
+
+ + +
+
+
0.0000 / 16.0000
+
0.0000
+
16.0000
+
+ +
File_Selected.mid
+
130 bpm x0.923
+
+ +
+ +
+ + + + + + +``` \ No newline at end of file