@nice2dev/ui-audio 1.0.12 → 1.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +48 -35
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,10 +17,12 @@ npm install @nice2dev/ui-audio
|
|
|
17
17
|
### Peer Dependencies
|
|
18
18
|
|
|
19
19
|
**Required:**
|
|
20
|
+
|
|
20
21
|
- `react` >= 17
|
|
21
22
|
- `react-dom` >= 17
|
|
22
23
|
|
|
23
24
|
**Optional** (enable specific features):
|
|
25
|
+
|
|
24
26
|
- `react-youtube` — YouTube player integration
|
|
25
27
|
- `react-window` — virtualized playlist rendering
|
|
26
28
|
- `hls.js` — HLS streaming support
|
|
@@ -58,7 +60,7 @@ function App() {
|
|
|
58
60
|
```tsx
|
|
59
61
|
import { GenericPlayer, GenericPlayerControls } from '@nice2dev/ui-audio';
|
|
60
62
|
|
|
61
|
-
<GenericPlayer src="/track.mp3" title="My Song" artist="Artist"
|
|
63
|
+
<GenericPlayer src="/track.mp3" title="My Song" artist="Artist" />;
|
|
62
64
|
```
|
|
63
65
|
|
|
64
66
|
### Karaoke
|
|
@@ -73,15 +75,12 @@ import { KaraokeLyrics, KaraokeTimeline } from '@nice2dev/ui-audio';
|
|
|
73
75
|
### DAW Editor
|
|
74
76
|
|
|
75
77
|
```tsx
|
|
76
|
-
import {
|
|
77
|
-
Waveform, PianoRoll, AudioTimeline,
|
|
78
|
-
EditorTrackProvider, useEditorTrack,
|
|
79
|
-
} from '@nice2dev/ui-audio';
|
|
78
|
+
import { Waveform, PianoRoll, AudioTimeline, EditorTrackProvider, useEditorTrack } from '@nice2dev/ui-audio';
|
|
80
79
|
|
|
81
80
|
<EditorTrackProvider value={editorState}>
|
|
82
81
|
<Waveform data={waveformData} zoom={zoom} />
|
|
83
82
|
<PianoRoll notes={midiNotes} duration={duration} zoom={zoom} />
|
|
84
|
-
</EditorTrackProvider
|
|
83
|
+
</EditorTrackProvider>;
|
|
85
84
|
```
|
|
86
85
|
|
|
87
86
|
### Playlist
|
|
@@ -101,7 +100,7 @@ import { GenericPlaylist, PlaylistBrowser } from '@nice2dev/ui-audio';
|
|
|
101
100
|
```tsx
|
|
102
101
|
import { StageVisualizer } from '@nice2dev/ui-audio';
|
|
103
102
|
|
|
104
|
-
<StageVisualizer analyser={analyserNode} mode="spectrum"
|
|
103
|
+
<StageVisualizer analyser={analyserNode} mode="spectrum" />;
|
|
105
104
|
```
|
|
106
105
|
|
|
107
106
|
## API Architecture
|
|
@@ -119,40 +118,40 @@ This library is **backend-agnostic**. All API-dependent operations are exposed a
|
|
|
119
118
|
|
|
120
119
|
### Components
|
|
121
120
|
|
|
122
|
-
| Module
|
|
123
|
-
|
|
124
|
-
| **Editor**
|
|
125
|
-
| **Editor Panels**
|
|
126
|
-
| **Karaoke**
|
|
127
|
-
| **Karaoke Editor** | `KaraokeEditorManager`, `KaraokePhaserRenderer`
|
|
128
|
-
| **Player**
|
|
129
|
-
| **Visualizer**
|
|
130
|
-
| **Playlist**
|
|
131
|
-
| **Effects**
|
|
121
|
+
| Module | Components |
|
|
122
|
+
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
123
|
+
| **Editor** | `Waveform`, `PianoRoll`, `CCLane`, `AudioTimeline` |
|
|
124
|
+
| **Editor Panels** | `AutoSavePanel`, `UndoRedoPanel`, `ZoomSnapControls`, `MasterFXPanel`, `RecordingOptionsPanel`, `CCAutomationLaneEditor`, `ArpeggiatorPanel`, `LFOPanel`, `StepSequencerPanel` |
|
|
125
|
+
| **Karaoke** | `KaraokeLyrics`, `KaraokeTimeline`, `BarFillEditor`, `AudioPitchAnalyzer` |
|
|
126
|
+
| **Karaoke Editor** | `KaraokeEditorManager`, `KaraokePhaserRenderer` |
|
|
127
|
+
| **Player** | `GenericPlayer`, `GenericPlayerControls`, `GenericPlayerStage`, `GenericPlayerStageVisualizer`, `YouTubePlayer` |
|
|
128
|
+
| **Visualizer** | `StageVisualizer`, `ModeSwitcher` |
|
|
129
|
+
| **Playlist** | `GenericPlaylist`, `GenericPlaylistItem`, `PlaylistTagEditor`, `DynamicRuleEditor`, `PlaylistDualPane`, `PlaylistBrowser`, `PlaylistList`, `PlaylistSidebar` |
|
|
130
|
+
| **Effects** | `NoteRiver`, `NoteParticles` |
|
|
132
131
|
|
|
133
132
|
### Hooks
|
|
134
133
|
|
|
135
|
-
| Hook
|
|
136
|
-
|
|
137
|
-
| `useEditorTrack`
|
|
138
|
-
| `useProjectCRUD`
|
|
139
|
-
| `useCCAutomation`
|
|
140
|
-
| `useStepSequencer`
|
|
141
|
-
| `useWebMidi`
|
|
142
|
-
| `useMidiLearn`
|
|
143
|
-
| `useOxygen25`
|
|
144
|
-
| `usePitchWorker`
|
|
145
|
-
| `useScoringWorker`
|
|
146
|
-
| `useLocalPlaylists` | Local playlist storage
|
|
134
|
+
| Hook | Purpose |
|
|
135
|
+
| ------------------- | ---------------------------------------------------- |
|
|
136
|
+
| `useEditorTrack` | Shared DAW editor state via context |
|
|
137
|
+
| `useProjectCRUD` | Project/section/layer CRUD with dependency injection |
|
|
138
|
+
| `useCCAutomation` | CC automation lane management |
|
|
139
|
+
| `useStepSequencer` | Step sequencer state |
|
|
140
|
+
| `useWebMidi` | Web MIDI API access |
|
|
141
|
+
| `useMidiLearn` | MIDI learn/mapping |
|
|
142
|
+
| `useOxygen25` | M-Audio Oxygen 25 controller profile |
|
|
143
|
+
| `usePitchWorker` | Pitch detection Web Worker |
|
|
144
|
+
| `useScoringWorker` | Karaoke scoring Web Worker |
|
|
145
|
+
| `useLocalPlaylists` | Local playlist storage |
|
|
147
146
|
|
|
148
147
|
### Engine
|
|
149
148
|
|
|
150
|
-
| Export
|
|
151
|
-
|
|
152
|
-
| `AudioPlaybackEngine` | Multi-track audio playback
|
|
153
|
-
| `VocalEffectsEngine`
|
|
154
|
-
| `SimpleSynth`
|
|
155
|
-
| `getAudioContext`
|
|
149
|
+
| Export | Purpose |
|
|
150
|
+
| --------------------- | --------------------------------------------------------- |
|
|
151
|
+
| `AudioPlaybackEngine` | Multi-track audio playback |
|
|
152
|
+
| `VocalEffectsEngine` | Real-time vocal effects (reverb, delay, distortion, etc.) |
|
|
153
|
+
| `SimpleSynth` | Basic synthesizer |
|
|
154
|
+
| `getAudioContext` | Shared AudioContext management |
|
|
156
155
|
|
|
157
156
|
### Utilities
|
|
158
157
|
|
|
@@ -170,6 +169,20 @@ npm run typecheck # TypeScript type checking
|
|
|
170
169
|
npm run test # Vitest unit tests
|
|
171
170
|
```
|
|
172
171
|
|
|
172
|
+
## Styling
|
|
173
|
+
|
|
174
|
+
This package ships unstyled component logic. Import the shared CSS bundle once at your app entrypoint:
|
|
175
|
+
|
|
176
|
+
```tsx
|
|
177
|
+
import '@nice2dev/ui/style.css';
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
Optional: opt into the legacy shorthand token aliases (`--bg-*`, `--text-*`, `--border-*`, ...) when migrating from a custom design-token system:
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
import '@nice2dev/ui/css/legacy-bg-text-aliases.css';
|
|
184
|
+
```
|
|
185
|
+
|
|
173
186
|
## License
|
|
174
187
|
|
|
175
188
|
MIT © NiceToDev
|
package/package.json
CHANGED