@react-synth/synth 0.0.7-alpha ā 0.2.1-alpha
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 +361 -187
- package/dist/cli.cjs.map +1 -1
- package/dist/cli.js.map +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +80 -80
package/README.md
CHANGED
|
@@ -1,187 +1,361 @@
|
|
|
1
|
-
# React Synth š¹
|
|
2
|
-
|
|
3
|
-
This is a fun little experiment showing that React API can be used outside of
|
|
4
|
-
browser environment to render... music instead of HTML.
|
|
5
|
-
|
|
6
|
-
Should you use it? I don't know, you are an adult.
|
|
7
|
-
|
|
8
|
-
## How It Works
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
1
|
+
# React Synth š¹
|
|
2
|
+
|
|
3
|
+
This is a fun little experiment showing that React API can be used outside of
|
|
4
|
+
browser environment to render... music instead of HTML.
|
|
5
|
+
|
|
6
|
+
Should you use it? I don't know, you are an adult.
|
|
7
|
+
|
|
8
|
+
## How It Works
|
|
9
|
+
|
|
10
|
+
Init new repository and install react-synth and its dependencies:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm init
|
|
14
|
+
npm i @react-synth/synth react
|
|
15
|
+
npm i -D @types/react
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Then create new `.tsx` file. React-synth requires created file to have default
|
|
19
|
+
export with ReactNode. For example, you can paste below code:
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
// song.tsx
|
|
23
|
+
import React from "react";
|
|
24
|
+
import {
|
|
25
|
+
Chord,
|
|
26
|
+
Loop,
|
|
27
|
+
Note,
|
|
28
|
+
Sample,
|
|
29
|
+
Sequence,
|
|
30
|
+
Synth,
|
|
31
|
+
Track,
|
|
32
|
+
} from "@react-synth/synth";
|
|
33
|
+
|
|
34
|
+
export default function MySong() {
|
|
35
|
+
return (
|
|
36
|
+
<Track bpm={120}>
|
|
37
|
+
{/* Simple kick drum pattern */}
|
|
38
|
+
<Loop id="kick" interval={1}>
|
|
39
|
+
<Sample name="bd_haus" amp={2} />
|
|
40
|
+
</Loop>
|
|
41
|
+
|
|
42
|
+
{/* Melody arpeggio with prophet synth */}
|
|
43
|
+
<Loop id="melody" interval={2}>
|
|
44
|
+
<Synth type="prophet">
|
|
45
|
+
<Sequence interval={0.25}>
|
|
46
|
+
<Note note="C4" />
|
|
47
|
+
<Note note="E4" />
|
|
48
|
+
<Note note="G4" />
|
|
49
|
+
<Note note="C5" />
|
|
50
|
+
</Sequence>
|
|
51
|
+
</Synth>
|
|
52
|
+
</Loop>
|
|
53
|
+
|
|
54
|
+
{/* Chord progression */}
|
|
55
|
+
<Loop id="pads" interval={4}>
|
|
56
|
+
<Synth type="hollow">
|
|
57
|
+
<Chord notes="Am7" release={4} amp={0.5} />
|
|
58
|
+
</Synth>
|
|
59
|
+
</Loop>
|
|
60
|
+
</Track>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
Then run it with:
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
npx react-synth song.tsx
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Now any change made to the code will cause hot reload without disruption.
|
|
72
|
+
|
|
73
|
+
## Components
|
|
74
|
+
|
|
75
|
+
### `<Track>`
|
|
76
|
+
|
|
77
|
+
Root component that sets the tempo and provides audio context. All other
|
|
78
|
+
components must be nested inside a Track.
|
|
79
|
+
|
|
80
|
+
| Prop | Type | Default | Description |
|
|
81
|
+
| ---------- | ----------- | ------- | --------------------------------------- |
|
|
82
|
+
| `bpm` | `number` | ā | **Required.** Tempo in beats per minute |
|
|
83
|
+
| `children` | `ReactNode` | ā | Child components to render |
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<Track bpm={120}>
|
|
87
|
+
{/* Your music components here */}
|
|
88
|
+
</Track>;
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
---
|
|
92
|
+
|
|
93
|
+
### `<Loop>`
|
|
94
|
+
|
|
95
|
+
Repeats its children at a specified beat interval. Use this for drum patterns,
|
|
96
|
+
repeating melodies, or any cyclical musical phrase.
|
|
97
|
+
|
|
98
|
+
| Prop | Type | Default | Description |
|
|
99
|
+
| ---------- | ----------- | ------- | --------------------------------------------------- |
|
|
100
|
+
| `id` | `string` | ā | **Required.** Unique identifier for this loop |
|
|
101
|
+
| `interval` | `number` | ā | **Required.** Interval in beats between repetitions |
|
|
102
|
+
| `children` | `ReactNode` | ā | Content to play on each loop iteration |
|
|
103
|
+
|
|
104
|
+
```tsx
|
|
105
|
+
{/* Kick drum every beat */}
|
|
106
|
+
<Loop id="kick" interval={1}>
|
|
107
|
+
<Sample name="bd_haus" />
|
|
108
|
+
</Loop>;
|
|
109
|
+
|
|
110
|
+
{/* Chord progression every 4 beats */}
|
|
111
|
+
<Loop id="chords" interval={4}>
|
|
112
|
+
<Chord notes="Am7" />
|
|
113
|
+
</Loop>;
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
### `<Sequence>`
|
|
119
|
+
|
|
120
|
+
Plays children one after another with a specified interval between each. Each
|
|
121
|
+
child is played at its index position Ć interval beats.
|
|
122
|
+
|
|
123
|
+
| Prop | Type | Default | Description |
|
|
124
|
+
| ---------- | ----------- | ------- | --------------------------------------------- |
|
|
125
|
+
| `interval` | `number` | ā | **Required.** Time between each step in beats |
|
|
126
|
+
| `children` | `ReactNode` | ā | Steps to play in order |
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
{/* Arpeggio: C-E-G-C played as 16th notes */}
|
|
130
|
+
<Sequence interval={0.25}>
|
|
131
|
+
<Note note="C4" />
|
|
132
|
+
<Note note="E4" />
|
|
133
|
+
<Note note="G4" />
|
|
134
|
+
<Note note="C5" />
|
|
135
|
+
</Sequence>;
|
|
136
|
+
|
|
137
|
+
{/* Drum pattern */}
|
|
138
|
+
<Sequence interval={0.5}>
|
|
139
|
+
<Sample name="bd_haus" />
|
|
140
|
+
<Sample name="drum_snare_soft" />
|
|
141
|
+
<Sample name="bd_haus" />
|
|
142
|
+
<Sample name="drum_snare_soft" />
|
|
143
|
+
</Sequence>;
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
### `<Synth>`
|
|
149
|
+
|
|
150
|
+
Defines the synthesizer configuration for child `Note` and `Chord` components.
|
|
151
|
+
Provides preset sounds and allows customization of oscillator, filter, and voice
|
|
152
|
+
parameters.
|
|
153
|
+
|
|
154
|
+
| Prop | Type | Default | Description |
|
|
155
|
+
| ------------ | ----------------------- | ------- | --------------------------------------------------------------------- |
|
|
156
|
+
| `type` | `SynthType` | ā | **Required.** Synth preset name (see below) |
|
|
157
|
+
| `oscillator` | `OscillatorType` | ā | Override oscillator: `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` |
|
|
158
|
+
| `filter` | `Partial<FilterConfig>` | ā | Override filter settings |
|
|
159
|
+
| `voices` | `Partial<VoiceConfig>` | ā | Override voice/unison settings |
|
|
160
|
+
| `children` | `ReactNode` | ā | Note/Chord components to apply this synth to |
|
|
161
|
+
|
|
162
|
+
**Available Synth Presets:**
|
|
163
|
+
|
|
164
|
+
| Preset | Description |
|
|
165
|
+
| ----------------- | ---------------------------------------------------- |
|
|
166
|
+
| `"sine"` | Pure sine wave - clean, fundamental tone |
|
|
167
|
+
| `"saw"` | Sawtooth wave - bright, harmonically rich |
|
|
168
|
+
| `"square"` | Square wave - hollow, clarinet-like |
|
|
169
|
+
| `"tri"` | Triangle wave - soft, flute-like |
|
|
170
|
+
| `"prophet"` | Prophet-5 inspired - warm with detuned voices |
|
|
171
|
+
| `"hollow"` | Ethereal pad - filtered square, atmospheric |
|
|
172
|
+
| `"dark_ambience"` | Deep atmospheric pad - low-passed with many voices |
|
|
173
|
+
| `"bass"` | Punchy bass - filtered sawtooth |
|
|
174
|
+
| `"pluck"` | Bright plucked string - square wave with high cutoff |
|
|
175
|
+
|
|
176
|
+
**Filter Config:**
|
|
177
|
+
|
|
178
|
+
| Property | Type | Description |
|
|
179
|
+
| ----------- | ------------------ | --------------------------------------------- |
|
|
180
|
+
| `type` | `FilterType` | `"lowpass"`, `"highpass"`, `"bandpass"`, etc. |
|
|
181
|
+
| `cutoff` | `number` or `Line` | Cutoff frequency in Hz, or a Line pattern |
|
|
182
|
+
| `resonance` | `number` | Filter resonance/Q factor |
|
|
183
|
+
|
|
184
|
+
**Voice Config:**
|
|
185
|
+
|
|
186
|
+
| Property | Type | Description |
|
|
187
|
+
| -------- | -------- | ------------------------------------ |
|
|
188
|
+
| `count` | `number` | Number of oscillator voices (unison) |
|
|
189
|
+
| `detune` | `number` | Detune spread in cents |
|
|
190
|
+
| `spread` | `number` | Stereo spread 0-1 |
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
{/* Using a preset */}
|
|
194
|
+
<Synth type="prophet">
|
|
195
|
+
<Note note="C4" />
|
|
196
|
+
</Synth>;
|
|
197
|
+
|
|
198
|
+
{/* Overriding filter settings */}
|
|
199
|
+
<Synth type="saw" filter={{ cutoff: 2000, resonance: 8 }}>
|
|
200
|
+
<Chord notes="Am7" />
|
|
201
|
+
</Synth>;
|
|
202
|
+
|
|
203
|
+
{/* Thick unison lead */}
|
|
204
|
+
<Synth type="saw" voices={{ count: 4, detune: 15, spread: 0.8 }}>
|
|
205
|
+
<Note note="A4" />
|
|
206
|
+
</Synth>;
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
### `<Note>`
|
|
212
|
+
|
|
213
|
+
Plays a single note using Web Audio oscillators with ADSR envelope. Inherits
|
|
214
|
+
synth settings from parent `<Synth>` component, or uses defaults.
|
|
215
|
+
|
|
216
|
+
| Prop | Type | Default | Description |
|
|
217
|
+
| --------------- | ----------------------- | --------------- | ------------------------------------------------------------ |
|
|
218
|
+
| `note` | `string` or `number` | ā | **Required.** Note name (`"C4"`, `"A#3"`) or frequency in Hz |
|
|
219
|
+
| `amp` | `number` | `0.3` | Amplitude/volume 0-1 |
|
|
220
|
+
| `attack` | `number` | `0` | Attack time in beats |
|
|
221
|
+
| `attack_level` | `number` | `1` | Peak level at end of attack (multiplied by amp) |
|
|
222
|
+
| `decay` | `number` | `0` | Decay time in beats |
|
|
223
|
+
| `decay_level` | `number` | `sustain_level` | Level at end of decay |
|
|
224
|
+
| `sustain` | `number` | `0` | Sustain time in beats |
|
|
225
|
+
| `sustain_level` | `number` | `1` | Sustained level (multiplied by amp) |
|
|
226
|
+
| `release` | `number` | `1` | Release time in beats |
|
|
227
|
+
| `oscillator` | `OscillatorType` | ā | Override synth oscillator type |
|
|
228
|
+
| `filter` | `Partial<FilterConfig>` | ā | Override filter settings |
|
|
229
|
+
| `voices` | `Partial<VoiceConfig>` | ā | Override voice settings |
|
|
230
|
+
|
|
231
|
+
**Note Duration:** Total duration = `attack` + `decay` + `sustain` + `release`
|
|
232
|
+
|
|
233
|
+
```tsx
|
|
234
|
+
{/* Simple note */}
|
|
235
|
+
<Note note="A4" />;
|
|
236
|
+
|
|
237
|
+
{/* Note with envelope */}
|
|
238
|
+
<Note note="C4" amp={0.5} attack={0.1} sustain={0.5} release={0.3} />;
|
|
239
|
+
|
|
240
|
+
{/* Note with frequency in Hz */}
|
|
241
|
+
<Note note={440} />;
|
|
242
|
+
|
|
243
|
+
{/* Note with filter override */}
|
|
244
|
+
<Note note="E4" filter={{ cutoff: 800, resonance: 5 }} />;
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
### `<Chord>`
|
|
250
|
+
|
|
251
|
+
Plays multiple notes simultaneously. Supports chord name notation (powered by
|
|
252
|
+
Tonal) or explicit note arrays.
|
|
253
|
+
|
|
254
|
+
| Prop | Type | Default | Description |
|
|
255
|
+
| --------------- | -------------------------------- | --------------- | ------------------------------------------ |
|
|
256
|
+
| `notes` | `string` or `(string\|number)[]` | ā | **Required.** Chord name or array of notes |
|
|
257
|
+
| `amp` | `number` | `0.3` | Amplitude/volume 0-1 |
|
|
258
|
+
| `attack` | `number` | `0` | Attack time in beats |
|
|
259
|
+
| `attack_level` | `number` | `1` | Peak level at end of attack |
|
|
260
|
+
| `decay` | `number` | `0` | Decay time in beats |
|
|
261
|
+
| `decay_level` | `number` | `sustain_level` | Level at end of decay |
|
|
262
|
+
| `sustain` | `number` | `0` | Sustain time in beats |
|
|
263
|
+
| `sustain_level` | `number` | `1` | Sustained level |
|
|
264
|
+
| `release` | `number` | `1` | Release time in beats |
|
|
265
|
+
| `oscillator` | `OscillatorType` | ā | Override synth oscillator type |
|
|
266
|
+
| `filter` | `Partial<FilterConfig>` | ā | Override filter settings |
|
|
267
|
+
| `voices` | `Partial<VoiceConfig>` | ā | Override voice settings |
|
|
268
|
+
|
|
269
|
+
**Chord Name Format:**
|
|
270
|
+
|
|
271
|
+
- Basic: `"C"`, `"Am"`, `"F#m"`, `"Bb"`
|
|
272
|
+
- Extended: `"Cmaj7"`, `"Dm7"`, `"G7"`, `"Am9"`
|
|
273
|
+
- With octave: `"Cmaj7:4"` (plays in octave 4, default is octave 3)
|
|
274
|
+
- Slash chords: `"Dm7/F"`, `"C/E"`
|
|
275
|
+
|
|
276
|
+
```tsx
|
|
277
|
+
{/* Chord name */}
|
|
278
|
+
<Chord notes="Am7" />;
|
|
279
|
+
|
|
280
|
+
{/* Chord in specific octave */}
|
|
281
|
+
<Chord notes="Cmaj7:4" />;
|
|
282
|
+
|
|
283
|
+
{/* Note array */}
|
|
284
|
+
<Chord notes={["C4", "E4", "G4"]} />;
|
|
285
|
+
|
|
286
|
+
{/* Frequency array */}
|
|
287
|
+
<Chord notes={[261.63, 329.63, 392.00]} />;
|
|
288
|
+
|
|
289
|
+
{/* With envelope for pad sound */}
|
|
290
|
+
<Chord notes="Em7" amp={0.4} attack={0.5} sustain={2} release={1} />;
|
|
291
|
+
```
|
|
292
|
+
|
|
293
|
+
---
|
|
294
|
+
|
|
295
|
+
### `<Sample>`
|
|
296
|
+
|
|
297
|
+
Plays an audio sample file with optional effects. Samples are loaded from a
|
|
298
|
+
built-in sample library.
|
|
299
|
+
|
|
300
|
+
| Prop | Type | Default | Description |
|
|
301
|
+
| -------- | ------------------ | ------- | -------------------------------------------------- |
|
|
302
|
+
| `name` | `SampleName` | ā | **Required.** Sample name (without file extension) |
|
|
303
|
+
| `amp` | `number` | `1` | Amplitude/volume multiplier |
|
|
304
|
+
| `cutoff` | `number` or `Line` | `20000` | Lowpass filter cutoff (MIDI note or Hz) |
|
|
305
|
+
| `rate` | `number` | `1` | Playback rate multiplier |
|
|
306
|
+
| `pan` | `number` | `0` | Stereo pan position: -1 (left) to 1 (right) |
|
|
307
|
+
|
|
308
|
+
**Cutoff Values (MIDI note ā Hz):**
|
|
309
|
+
|
|
310
|
+
- `60` ā ~262 Hz (C4)
|
|
311
|
+
- `80` ā ~831 Hz
|
|
312
|
+
- `100` ā ~2637 Hz
|
|
313
|
+
- `110` ā ~4699 Hz
|
|
314
|
+
- `130` ā ~20kHz (no filtering)
|
|
315
|
+
|
|
316
|
+
```tsx
|
|
317
|
+
{/* Basic kick drum */}
|
|
318
|
+
<Sample name="bd_haus" />;
|
|
319
|
+
|
|
320
|
+
{/* Louder with filter */}
|
|
321
|
+
<Sample name="bd_haus" amp={2} cutoff={100} />;
|
|
322
|
+
|
|
323
|
+
{/* Hi-hat with pitch shift and panning */}
|
|
324
|
+
<Sample name="drum_cymbal_closed" rate={1.2} pan={0.3} />;
|
|
325
|
+
|
|
326
|
+
{/* Snare with lowpass filter */}
|
|
327
|
+
<Sample name="drum_snare_soft" cutoff={80} amp={0.8} />;
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
---
|
|
331
|
+
|
|
332
|
+
## Line Patterns
|
|
333
|
+
|
|
334
|
+
The `cutoff` prop on `<Note>`, `<Chord>`, and `<Sample>` components supports
|
|
335
|
+
Line patterns for dynamic filter sweeps within a `<Sequence>`:
|
|
336
|
+
|
|
337
|
+
```tsx
|
|
338
|
+
<Sequence interval={0.25}>
|
|
339
|
+
{/* Filter sweeps from 60 to 120 over 8 steps */}
|
|
340
|
+
<Note note="C4" filter={{ cutoff: { from: 60, to: 120, steps: 8 } }} />
|
|
341
|
+
<Note note="E4" filter={{ cutoff: { from: 60, to: 120, steps: 8 } }} />
|
|
342
|
+
<Note note="G4" filter={{ cutoff: { from: 60, to: 120, steps: 8 } }} />
|
|
343
|
+
{/* ... */}
|
|
344
|
+
</Sequence>;
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
| Property | Type | Description |
|
|
348
|
+
| -------- | --------- | --------------------------------- |
|
|
349
|
+
| `from` | `number` | Starting cutoff value (MIDI note) |
|
|
350
|
+
| `to` | `number` | Ending cutoff value (MIDI note) |
|
|
351
|
+
| `steps` | `number` | Number of interpolation steps |
|
|
352
|
+
| `mirror` | `boolean` | If true, goes up then back down |
|
|
353
|
+
| `step` | `number` | Manual step index override |
|
|
354
|
+
|
|
355
|
+
## Inspired By
|
|
356
|
+
|
|
357
|
+
- [Sonic Pi](https://sonic-pi.net/) - The original live coding synth
|
|
358
|
+
|
|
359
|
+
## License
|
|
360
|
+
|
|
361
|
+
MIT
|
package/dist/cli.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.cjs","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\
|
|
1
|
+
{"version":3,"file":"cli.cjs","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { resolve } from \"path\";\nimport {\n createServer,\n type ModuleNode,\n normalizePath,\n type ViteDevServer,\n} from \"vite\";\nimport { JSDOM } from \"jsdom\";\nimport { type ComponentType, createElement } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\n// Create fake DOM for React\nconst dom = new JSDOM('<!DOCTYPE html><div id=\"root\"></div>');\n\n// Polyfill globals that React needs\n(globalThis as any).document = dom.window.document;\n(globalThis as any).window = dom.window;\n\nlet root: Root | null = null;\n\nfunction renderSong(SongComponent: ComponentType): void {\n const container = document.getElementById(\"root\")!;\n\n if (!root) {\n root = createRoot(container);\n }\n\n root.render(createElement(SongComponent));\n}\n\nasync function main(): Promise<void> {\n const filePath = process.argv[2];\n\n if (!filePath) {\n console.log(`\nš¹ React Synth - Live coding music with React\n\nUsage: \n npx react-synth <song.tsx> Run a song with hot reload\n`);\n process.exit(0);\n }\n\n // Use normalizePath for consistent forward slashes (Vite uses forward slashes internally)\n const absolutePath = normalizePath(resolve(process.cwd(), filePath));\n console.log(`šµ Loading ${filePath}...`);\n\n const vite: ViteDevServer = await createServer({\n configFile: false,\n root: process.cwd(),\n server: {\n middlewareMode: true,\n hmr: true,\n },\n appType: \"custom\",\n optimizeDeps: {\n exclude: [\"@react-synth/synth\", \"node-web-audio-api\"],\n },\n ssr: {\n external: [\"node-web-audio-api\", \"jsdom\"],\n noExternal: [\"@react-synth/synth\", \"tonal\"],\n },\n esbuild: {\n jsx: \"automatic\",\n },\n logLevel: \"info\",\n });\n\n let currentModuleUrl: string | null = null;\n\n async function loadSong(): Promise<void> {\n const url = `${absolutePath}?t=${Date.now()}`;\n\n // Invalidate the previous module if it exists\n if (currentModuleUrl) {\n const mod = await vite.moduleGraph.getModuleByUrl(currentModuleUrl);\n if (mod) {\n invalidateModuleAndImporters(mod);\n }\n }\n\n currentModuleUrl = url;\n const module = await vite.ssrLoadModule(url);\n\n // Auto-render the default export if it's a component\n if (module.default && typeof module.default === \"function\") {\n renderSong(module.default);\n } else {\n console.warn(\n \"ā ļø No default export found. Song file should export a React component as default.\",\n );\n }\n }\n\n // Recursively invalidate a module and all its importers\n function invalidateModuleAndImporters(mod: ModuleNode): void {\n vite.moduleGraph.invalidateModule(mod);\n for (const importer of mod.importers) {\n invalidateModuleAndImporters(importer);\n }\n }\n\n // Collect all dependencies (imports) of a module recursively\n function collectDependencies(\n mod: ModuleNode,\n visited: Set<string> = new Set(),\n ): Set<string> {\n if (mod.file) {\n visited.add(mod.file);\n }\n\n for (const imported of mod.ssrImportedModules) {\n if (imported.file && !visited.has(imported.file)) {\n collectDependencies(imported, visited);\n }\n }\n\n return visited;\n }\n\n // Check if a file is a dependency of the song module\n function isDependencyOfSong(changedFile: string): boolean {\n const songMod = vite.moduleGraph.getModulesByFile(absolutePath);\n if (!songMod || songMod.size === 0) {\n return false;\n }\n\n for (const mod of songMod) {\n const deps = collectDependencies(mod);\n if (deps.has(changedFile)) {\n return true;\n }\n }\n\n return false;\n }\n\n await loadSong();\n console.log(\"š¹ Playing track\");\n console.log(\" Watching for changes...\");\n\n let debounce: ReturnType<typeof setTimeout> | undefined;\n\n vite.watcher.on(\"change\", async (changedPath) => {\n // Normalize to forward slashes to match Vite's module graph\n const normalizedChanged = normalizePath(resolve(changedPath));\n\n // Reload if the song file itself changed, or any of its dependencies\n if (!isDependencyOfSong(normalizedChanged)) {\n return;\n }\n\n clearTimeout(debounce);\n debounce = setTimeout(async () => {\n try {\n await loadSong();\n console.log(`ā
Hot reloaded (${changedPath})`);\n } catch (e) {\n console.error(\"ā Error:\", e instanceof Error ? e.message : String(e));\n }\n }, 50);\n });\n\n process.on(\"SIGINT\", async () => {\n console.log(\"\\nš Stopping...\");\n await vite.close();\n process.exit(0);\n });\n}\n\nmain().catch(console.error);\n"],"names":["JSDOM","createRoot","createElement","normalizePath","resolve","vite","createServer","module"],"mappings":"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"}
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.js","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\
|
|
1
|
+
{"version":3,"file":"cli.js","sources":["../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { resolve } from \"path\";\nimport {\n createServer,\n type ModuleNode,\n normalizePath,\n type ViteDevServer,\n} from \"vite\";\nimport { JSDOM } from \"jsdom\";\nimport { type ComponentType, createElement } from \"react\";\nimport { createRoot, type Root } from \"react-dom/client\";\n\n// Create fake DOM for React\nconst dom = new JSDOM('<!DOCTYPE html><div id=\"root\"></div>');\n\n// Polyfill globals that React needs\n(globalThis as any).document = dom.window.document;\n(globalThis as any).window = dom.window;\n\nlet root: Root | null = null;\n\nfunction renderSong(SongComponent: ComponentType): void {\n const container = document.getElementById(\"root\")!;\n\n if (!root) {\n root = createRoot(container);\n }\n\n root.render(createElement(SongComponent));\n}\n\nasync function main(): Promise<void> {\n const filePath = process.argv[2];\n\n if (!filePath) {\n console.log(`\nš¹ React Synth - Live coding music with React\n\nUsage: \n npx react-synth <song.tsx> Run a song with hot reload\n`);\n process.exit(0);\n }\n\n // Use normalizePath for consistent forward slashes (Vite uses forward slashes internally)\n const absolutePath = normalizePath(resolve(process.cwd(), filePath));\n console.log(`šµ Loading ${filePath}...`);\n\n const vite: ViteDevServer = await createServer({\n configFile: false,\n root: process.cwd(),\n server: {\n middlewareMode: true,\n hmr: true,\n },\n appType: \"custom\",\n optimizeDeps: {\n exclude: [\"@react-synth/synth\", \"node-web-audio-api\"],\n },\n ssr: {\n external: [\"node-web-audio-api\", \"jsdom\"],\n noExternal: [\"@react-synth/synth\", \"tonal\"],\n },\n esbuild: {\n jsx: \"automatic\",\n },\n logLevel: \"info\",\n });\n\n let currentModuleUrl: string | null = null;\n\n async function loadSong(): Promise<void> {\n const url = `${absolutePath}?t=${Date.now()}`;\n\n // Invalidate the previous module if it exists\n if (currentModuleUrl) {\n const mod = await vite.moduleGraph.getModuleByUrl(currentModuleUrl);\n if (mod) {\n invalidateModuleAndImporters(mod);\n }\n }\n\n currentModuleUrl = url;\n const module = await vite.ssrLoadModule(url);\n\n // Auto-render the default export if it's a component\n if (module.default && typeof module.default === \"function\") {\n renderSong(module.default);\n } else {\n console.warn(\n \"ā ļø No default export found. Song file should export a React component as default.\",\n );\n }\n }\n\n // Recursively invalidate a module and all its importers\n function invalidateModuleAndImporters(mod: ModuleNode): void {\n vite.moduleGraph.invalidateModule(mod);\n for (const importer of mod.importers) {\n invalidateModuleAndImporters(importer);\n }\n }\n\n // Collect all dependencies (imports) of a module recursively\n function collectDependencies(\n mod: ModuleNode,\n visited: Set<string> = new Set(),\n ): Set<string> {\n if (mod.file) {\n visited.add(mod.file);\n }\n\n for (const imported of mod.ssrImportedModules) {\n if (imported.file && !visited.has(imported.file)) {\n collectDependencies(imported, visited);\n }\n }\n\n return visited;\n }\n\n // Check if a file is a dependency of the song module\n function isDependencyOfSong(changedFile: string): boolean {\n const songMod = vite.moduleGraph.getModulesByFile(absolutePath);\n if (!songMod || songMod.size === 0) {\n return false;\n }\n\n for (const mod of songMod) {\n const deps = collectDependencies(mod);\n if (deps.has(changedFile)) {\n return true;\n }\n }\n\n return false;\n }\n\n await loadSong();\n console.log(\"š¹ Playing track\");\n console.log(\" Watching for changes...\");\n\n let debounce: ReturnType<typeof setTimeout> | undefined;\n\n vite.watcher.on(\"change\", async (changedPath) => {\n // Normalize to forward slashes to match Vite's module graph\n const normalizedChanged = normalizePath(resolve(changedPath));\n\n // Reload if the song file itself changed, or any of its dependencies\n if (!isDependencyOfSong(normalizedChanged)) {\n return;\n }\n\n clearTimeout(debounce);\n debounce = setTimeout(async () => {\n try {\n await loadSong();\n console.log(`ā
Hot reloaded (${changedPath})`);\n } catch (e) {\n console.error(\"ā Error:\", e instanceof Error ? e.message : String(e));\n }\n }, 50);\n });\n\n process.on(\"SIGINT\", async () => {\n console.log(\"\\nš Stopping...\");\n await vite.close();\n process.exit(0);\n });\n}\n\nmain().catch(console.error);\n"],"names":[],"mappings":"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"}
|