mirror of
https://codeberg.org/uzu/strudel
synced 2026-08-06 06:52:51 -04:00
Merge remote-tracking branch 'origin/main' into uzu
This commit is contained in:
Felix Roos
@@ -16,24 +16,97 @@ It is also possible to pattern other things with Strudel, such as software and h
|
||||
|
||||
Strudel supports MIDI without any additional software (thanks to [webmidi](https://npmjs.com/package/webmidi)), just by adding methods to your pattern:
|
||||
|
||||
## midi(outputName?)
|
||||
## midiin(inputName?)
|
||||
|
||||
<JsDoc client:idle name="midin" h={0} />
|
||||
|
||||
## midi(outputName?,options?)
|
||||
|
||||
Either connect a midi device or use the IAC Driver (Mac) or Midi Through Port (Linux) for internal midi messages.
|
||||
If no outputName is given, it uses the first midi output it finds.
|
||||
|
||||
<MiniRepl client:idle tune={`chord("<C^7 A7 Dm7 G7>").voicing().midi()`} />
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`
|
||||
$: chord("<C^7 A7 Dm7 G7>").voicing().midi('IAC Driver')
|
||||
`}
|
||||
/>
|
||||
|
||||
In the console, you will see a log of the available MIDI devices as soon as you run the code, e.g. `Midi connected! Using "Midi Through Port-0".`
|
||||
In the console, you will see a log of the available MIDI devices as soon as you run the code,
|
||||
e.g.
|
||||
|
||||
```
|
||||
`Midi connected! Using "Midi Through Port-0".`
|
||||
```
|
||||
|
||||
The `.midi()` function accepts an options object with the following properties:
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`$: note("d e c a f").midi('IAC Driver', { isController: true, midimap: 'default'})
|
||||
`}
|
||||
/>
|
||||
|
||||
<details>
|
||||
<summary>Available Options</summary>
|
||||
|
||||
| Option | Type | Default | Description |
|
||||
| ------------ | ------------- | --------- | ---------------------------------------------------------------------- |
|
||||
| isController | boolean | false | When true, disables sending note messages. Useful for MIDI controllers |
|
||||
| latencyMs | number | 34 | Latency in milliseconds to align MIDI with audio engine |
|
||||
| noteOffsetMs | number | 10 | Offset in milliseconds for note-off messages to prevent glitching |
|
||||
| midichannel | number | 1 | Default MIDI channel (1-16) |
|
||||
| velocity | number | 0.9 | Default note velocity (0-1) |
|
||||
| gain | number | 1 | Default gain multiplier for velocity (0-1) |
|
||||
| midimap | string | 'default' | Name of MIDI mapping to use for control changes |
|
||||
| midiport | string/number | - | MIDI device name or index |
|
||||
|
||||
</details>
|
||||
|
||||
### midiport(outputName)
|
||||
|
||||
Selects the MIDI output device to use, pattern can be used to switch between devices.
|
||||
|
||||
```javascript
|
||||
$: midiport('IAC Driver');
|
||||
$: note('c a f e').midiport('<0 1 2 3>').midi();
|
||||
```
|
||||
|
||||
<JsDoc client:idle name="midiport" h={0} />
|
||||
|
||||
## midichan(number)
|
||||
|
||||
Selects the MIDI channel to use. If not used, `.midi` will use channel 1 by default.
|
||||
|
||||
## ccn && ccv
|
||||
## midicmd(command)
|
||||
|
||||
`midicmd` sends MIDI system real-time messages to control timing and transport on MIDI devices.
|
||||
|
||||
It supports the following commands:
|
||||
|
||||
- `clock`/`midiClock` - Sends MIDI timing clock messages
|
||||
- `start` - Sends MIDI start message
|
||||
- `stop` - Sends MIDI stop message
|
||||
- `continue` - Sends MIDI continue message
|
||||
|
||||
// You can control the clock with a pattern and ensure it starts in sync when the repl begins.
|
||||
// Note: It might act unexpectedly if MIDI isn't set up initially.
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`$:stack(
|
||||
midicmd("clock*48,<start stop>/2").midi('IAC Driver')
|
||||
)`}
|
||||
/>
|
||||
|
||||
## control, ccn && ccv
|
||||
|
||||
- `control` sends MIDI control change messages to your MIDI device.
|
||||
- `ccn` sets the cc number. Depends on your synths midi mapping
|
||||
- `ccv` sets the cc value. normalized from 0 to 1.
|
||||
|
||||
<MiniRepl client:idle tune={`note("c a f e").control([74, sine.slow(4)]).midi()`} />
|
||||
|
||||
<MiniRepl client:idle tune={`note("c a f e").ccn(74).ccv(sine.slow(4)).midi()`} />
|
||||
|
||||
In the above snippet, `ccn` is set to 74, which is the filter cutoff for many synths. `ccv` is controlled by a saw pattern.
|
||||
@@ -56,6 +129,48 @@ Instead of setting `ccn` and `ccv` directly, you can also create mappings with `
|
||||
|
||||
<JsDoc client:idle name="defaultmidimap" h={0} />
|
||||
|
||||
## progNum (Program Change)
|
||||
|
||||
`progNum` sends MIDI program change messages to switch between different presets/patches on your MIDI device.
|
||||
Program change values should be numbers between 0 and 127.
|
||||
|
||||
<MiniRepl client:idle tune={`// Switch between programs 0 and 1 every cycle
|
||||
progNum("<0 1>").midi()
|
||||
|
||||
// Play notes while changing programs
|
||||
note("c3 e3 g3").progNum("<0 1 2>").midi()`} />
|
||||
|
||||
Program change messages are useful for switching between different instrument sounds or presets during a performance.
|
||||
The exact sound that each program number maps to depends on your MIDI device's configuration.
|
||||
|
||||
## sysex, sysexid && sysexdata (System Exclusive Message)
|
||||
|
||||
`sysex` sends MIDI System Exclusive (SysEx) messages to your MIDI device.
|
||||
ysEx messages are device-specific commands that allow deeper control over synthesizer parameters.
|
||||
The value should be an array of numbers between 0-255 representing the SysEx data bytes.
|
||||
|
||||
<MiniRepl
|
||||
client:idle
|
||||
tune={`// Send a simple SysEx message
|
||||
let id = 0x43; //Yamaha
|
||||
//let id = "0x00:0x20:0x32"; //Behringer ID can be an array of numbers
|
||||
let data = "0x79:0x09:0x11:0x0A:0x00:0x00"; // Set NSX-39 voice to say "Aa"
|
||||
$: note("c a f e").sysex(id, data).midi();
|
||||
$: note("c a f e").sysexid(id).sysexdata(data).midi();`}
|
||||
/>
|
||||
|
||||
The exact format of SysEx messages depends on your MIDI device's specification.
|
||||
Consult your device's MIDI implementation guide for details on supported SysEx messages.
|
||||
|
||||
## midibend && miditouch
|
||||
|
||||
`midibend` sets MIDI pitch bend (-1 - 1)
|
||||
`miditouch` sets MIDI key after touch (0-1)
|
||||
|
||||
<MiniRepl client:idle tune={`note("c a f e").midibend(sine.slow(4).range(-0.4,0.4)).midi()`} />
|
||||
|
||||
<MiniRepl client:idle tune={`note("c a f e").miditouch(sine.slow(4).range(0,1)).midi()`} />
|
||||
|
||||
# OSC/SuperDirt/StrudelDirt
|
||||
|
||||
In TidalCycles, sound is usually generated using [SuperDirt](https://github.com/musikinformatik/SuperDirt/), which runs inside SuperCollider. Strudel also supports using SuperDirt, although it requires installing some additional software.
|
||||
@@ -118,8 +233,8 @@ The following example shows how to send a pattern to an MQTT broker:
|
||||
client:only="react"
|
||||
tune={`"hello world"
|
||||
.mqtt(undefined, // username (undefined for open/public servers)
|
||||
undefined, // password
|
||||
'/strudel-pattern', // mqtt 'topic'
|
||||
undefined, // password
|
||||
'/strudel-pattern', // mqtt 'topic'
|
||||
'wss://mqtt.eclipseprojects.io:443/mqtt', // MQTT server address
|
||||
'mystrudel', // MQTT client id - randomly generated if not supplied
|
||||
0 // latency / delay before sending messages (0 = no delay)
|
||||
@@ -130,12 +245,14 @@ The following example shows how to send a pattern to an MQTT broker:
|
||||
Other software can then receive the messages. For example using the [mosquitto](https://mosquitto.org/) commandline client tools:
|
||||
|
||||
```
|
||||
> mosquitto_sub -h mqtt.eclipseprojects.io -p 1883 -t "/strudel-pattern"
|
||||
hello
|
||||
world
|
||||
hello
|
||||
world
|
||||
...
|
||||
|
||||
> mosquitto_sub -h mqtt.eclipseprojects.io -p 1883 -t "/strudel-pattern"
|
||||
> hello
|
||||
> world
|
||||
> hello
|
||||
> world
|
||||
> ...
|
||||
|
||||
```
|
||||
|
||||
Control patterns will be encoded as JSON, for example:
|
||||
@@ -155,11 +272,17 @@ Control patterns will be encoded as JSON, for example:
|
||||
Will send messages like the following:
|
||||
|
||||
```
|
||||
|
||||
{"s":"sax","speed":2}
|
||||
{"s":"sax","speed":2}
|
||||
{"s":"sax","speed":3}
|
||||
{"s":"sax","speed":2}
|
||||
...
|
||||
|
||||
```
|
||||
|
||||
Libraries for receiving MQTT are available for many programming languages.
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
@@ -66,7 +66,7 @@ While it saves resources, it can also lead to sounds not being audible the first
|
||||
|
||||
# Sound Banks
|
||||
|
||||
If we open the `sounds` tab and then `drum machines`, we can see that the drum samples are all prefixed with drum machine names: `RolandTR808_bd`, `RolandTR808_sd`, `RolandTR808_hh` etc..
|
||||
If we open the `sounds` tab and then `drum-machines`, we can see that the drum samples are all prefixed with drum machine names: `RolandTR808_bd`, `RolandTR808_sd`, `RolandTR808_hh` etc..
|
||||
|
||||
We _could_ use them like this:
|
||||
|
||||
@@ -180,11 +180,12 @@ It assumes a `strudel.json` file to be present at the root of the repository:
|
||||
https://raw.githubusercontent.com/<user>/<repo>/<branch>/strudel.json
|
||||
```
|
||||
|
||||
## From Disk via "Import Sounds"
|
||||
## From Disk via "Import Sounds Folder"
|
||||
|
||||
If you don't want to upload your samples to the internet, you can also load them from your local disk.
|
||||
Go to the `sounds` tab in the REPL and press "import sounds".
|
||||
Then you can select a folder that contains audio files. The folder you select can also contain subfolders with audio files.
|
||||
Go to the `sounds` tab in the REPL and open the `import-sounds` tab below the search bar.
|
||||
Press the "import sounds folder" button and select a folder that contains audio files.
|
||||
The folder you select can also contain subfolders with audio files.
|
||||
Example:
|
||||
|
||||
```
|
||||
@@ -200,12 +201,13 @@ Example:
|
||||
```
|
||||
|
||||
In the above example the folder `samples` contains 2 subfolders `swoop` and `smash`, which contain audio files.
|
||||
If you select that `samples` folder, the `user` tab (next to the import sounds button) will then contain 2 new sounds: `swoop(3) smash(3)`
|
||||
If you select that `samples` folder, the `user` tab (next to the `import-sounds` tab) will then contain 2 new sounds: `swoop(3) smash(3)`
|
||||
The individual samples can the be played normally like `s("swoop:0 swoop:1 smash:2")`.
|
||||
The samples within each sound use zero-based indexing in alphabetical order.
|
||||
|
||||
## From Disk via @strudel/sampler
|
||||
|
||||
Instead of loading your samples into your browser with the "import sounds" button, you can also serve the samples from a local file server.
|
||||
Instead of loading your samples into your browser with the "import sounds folder" button, you can also serve the samples from a local file server.
|
||||
The easiest way to do this is using [@strudel/sampler](https://www.npmjs.com/package/@strudel/sampler):
|
||||
|
||||
```sh
|
||||
|
||||
@@ -24,7 +24,7 @@ With the new stepwise `stepcat` function, the steps of the two patterns will be
|
||||
|
||||
By default, steps are counted according to the 'top level' in mini-notation. For example `"a [b c] d e"` has five events in it per cycle, but is counted as four steps, where `[b c]` is counted as a single step.
|
||||
|
||||
However, you can mark a different metrical level to count steps relative to, using a `^` at the start of a sub-pattern. If we do this to the subpattern in our example: `"a [^b c] d e"`, then the pattern is now counted as having _eight_ steps. This is because 'b' and 'c' are each counted as single steps, and the events in the pattenr are twice as long, and so counted as two steps each.
|
||||
However, you can mark a different metrical level to count steps relative to, using a `^` at the start of a sub-pattern. If we do this to the subpattern in our example: `"a [^b c] d e"`, then the pattern is now counted as having _eight_ steps. This is because 'b' and 'c' are each counted as single steps, and the events in the pattern are twice as long, and so counted as two steps each.
|
||||
|
||||
## Pacing the steps
|
||||
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
---
|
||||
import HeadCommon from '@components/HeadCommon.astro';
|
||||
import { Udels } from '../../components/Udels/Udels.jsx';
|
||||
|
||||
|
||||
const { BASE_URL } = import.meta.env;
|
||||
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
|
||||
---
|
||||
|
||||
|
||||
<body class="m-0">
|
||||
<Udels client:only="react" />
|
||||
</body>
|
||||
<html lang="en" class="m-0">
|
||||
<head>
|
||||
<HeadCommon />
|
||||
<title>Strudel UDELS</title>
|
||||
</head>
|
||||
<body class="m-0">
|
||||
<Udels client:only="react" />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,5 +4,9 @@ export default function UserFacingErrorMessage(Props) {
|
||||
if (error == null) {
|
||||
return;
|
||||
}
|
||||
return <div className="text-red-500 p-4 bg-lineHighlight animate-pulse">{error.message || 'Unknown Error :-/'}</div>;
|
||||
return (
|
||||
<div className="text-background px-2 py-1 bg-foreground w-full ml-auto">
|
||||
Error: {error.message || 'Unknown Error :-/'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { getAudioDevices, setAudioDevice } from '../../util.mjs';
|
||||
|
||||
import { SelectInput } from './SelectInput';
|
||||
import { getAudioDevices } from '@strudel/webaudio';
|
||||
|
||||
const initdevices = new Map();
|
||||
|
||||
@@ -21,9 +22,7 @@ export function AudioDeviceSelector({ audioDeviceName, onChange, isDisabled }) {
|
||||
if (!devicesInitialized) {
|
||||
return;
|
||||
}
|
||||
const deviceID = devices.get(deviceName);
|
||||
onChange(deviceName);
|
||||
setAudioDevice(deviceID);
|
||||
};
|
||||
const options = new Map();
|
||||
Array.from(devices.keys()).forEach((deviceName) => {
|
||||
|
||||
@@ -20,25 +20,42 @@ export default function ImportSoundsButton({ onComplete }) {
|
||||
});
|
||||
|
||||
return (
|
||||
<label
|
||||
style={{ alignItems: 'center' }}
|
||||
className="flex bg-background ml-2 pl-2 pr-2 max-w-[300px] rounded-md hover:opacity-50 whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<input
|
||||
disabled={isUploading}
|
||||
ref={fileUploadRef}
|
||||
id="audio_file"
|
||||
style={{ display: 'none' }}
|
||||
type="file"
|
||||
directory=""
|
||||
webkitdirectory=""
|
||||
multiple
|
||||
accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
|
||||
onChange={() => {
|
||||
onChange();
|
||||
}}
|
||||
/>
|
||||
{isUploading ? 'importing...' : 'import sounds'}
|
||||
</label>
|
||||
<div>
|
||||
<label
|
||||
style={{ alignItems: 'center', borderColor: 'red', border: 1 }}
|
||||
className="flex bg-background p-4 w-fit rounded-xl hover:opacity-50 whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth={1.5}
|
||||
stroke="currentColor"
|
||||
className="size-6 mr-2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7.5 7.5h-.75A2.25 2.25 0 0 0 4.5 9.75v7.5a2.25 2.25 0 0 0 2.25 2.25h7.5a2.25 2.25 0 0 0 2.25-2.25v-7.5a2.25 2.25 0 0 0-2.25-2.25h-.75m0-3-3-3m0 0-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 0 1 2.25 2.25v7.5a2.25 2.25 0 0 1-2.25 2.25h-7.5a2.25 2.25 0 0 1-2.25-2.25v-.75"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<input
|
||||
disabled={isUploading}
|
||||
ref={fileUploadRef}
|
||||
id="audio_file"
|
||||
style={{ display: 'none' }}
|
||||
type="file"
|
||||
directory=""
|
||||
webkitdirectory=""
|
||||
multiple
|
||||
accept="audio/*, .wav, .mp3, .m4a, .flac, .aac, .ogg"
|
||||
onChange={() => {
|
||||
onChange();
|
||||
}}
|
||||
/>
|
||||
{isUploading ? 'importing...' : 'import sounds folder'}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ export function SelectInput({ value, options, onChange, onClick, isDisabled }) {
|
||||
<select
|
||||
disabled={isDisabled}
|
||||
onClick={onClick}
|
||||
className="p-2 bg-background rounded-md text-foreground"
|
||||
className="p-2 bg-background rounded-md text-foreground border-foreground"
|
||||
value={value ?? ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { defaultSettings, settingsMap, useSettings } from '../../../settings.mjs';
|
||||
import { themes } from '@strudel/codemirror';
|
||||
import { Textbox } from '../textbox/Textbox.jsx';
|
||||
import { isUdels } from '../../util.mjs';
|
||||
import { ButtonGroup } from './Forms.jsx';
|
||||
import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
|
||||
import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
|
||||
import { confirmDialog } from '../../util.mjs';
|
||||
import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony } from '@strudel/webaudio';
|
||||
|
||||
function Checkbox({ label, value, onChange, disabled = false }) {
|
||||
return (
|
||||
@@ -18,7 +20,7 @@ function Checkbox({ label, value, onChange, disabled = false }) {
|
||||
function SelectInput({ value, options, onChange }) {
|
||||
return (
|
||||
<select
|
||||
className="p-2 bg-background rounded-md text-foreground"
|
||||
className="p-2 bg-background rounded-md text-foreground border-foreground"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
>
|
||||
@@ -53,7 +55,7 @@ function NumberSlider({ value, onChange, step = 1, ...rest }) {
|
||||
);
|
||||
}
|
||||
|
||||
function FormItem({ label, children }) {
|
||||
function FormItem({ label, children, sublabel }) {
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
<label>{label}</label>
|
||||
@@ -105,6 +107,7 @@ export function SettingsTab({ started }) {
|
||||
audioDeviceName,
|
||||
audioEngineTarget,
|
||||
togglePanelTrigger,
|
||||
maxPolyphony,
|
||||
} = useSettings();
|
||||
const shouldAlwaysSync = isUdels();
|
||||
const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
|
||||
@@ -139,6 +142,26 @@ export function SettingsTab({ started }) {
|
||||
}}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="Maximum Polyphony">
|
||||
<Textbox
|
||||
min={1}
|
||||
max={Infinity}
|
||||
onBlur={(e) => {
|
||||
let v = parseInt(e.target.value);
|
||||
v = isNaN(v) ? DEFAULT_MAX_POLYPHONY : v;
|
||||
setMaxPolyphony(v);
|
||||
settingsMap.setKey('maxPolyphony', v);
|
||||
}}
|
||||
onChange={(v) => {
|
||||
v = Math.max(1, parseInt(v));
|
||||
settingsMap.setKey('maxPolyphony', isNaN(v) ? undefined : v);
|
||||
}}
|
||||
type="number"
|
||||
placeholder=""
|
||||
value={maxPolyphony ?? ''}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem label="Theme">
|
||||
<SelectInput options={themeOptions} value={theme} onChange={(theme) => settingsMap.setKey('theme', theme)} />
|
||||
</FormItem>
|
||||
@@ -179,25 +202,7 @@ export function SettingsTab({ started }) {
|
||||
value={togglePanelTrigger}
|
||||
onChange={(value) => settingsMap.setKey('togglePanelTrigger', value)}
|
||||
items={{ click: 'Click', hover: 'Hover' }}
|
||||
></ButtonGroup>
|
||||
{/* <Checkbox
|
||||
label="Click"
|
||||
onChange={(cbEvent) => {
|
||||
if (cbEvent.target.checked) {
|
||||
settingsMap.setKey('togglePanelTrigger', 'click');
|
||||
}
|
||||
}}
|
||||
value={togglePanelTrigger != 'hover'}
|
||||
/>
|
||||
<Checkbox
|
||||
label="Hover"
|
||||
onChange={(cbEvent) => {
|
||||
if (cbEvent.target.checked) {
|
||||
settingsMap.setKey('togglePanelTrigger', 'hover');
|
||||
}
|
||||
}}
|
||||
value={togglePanelTrigger == 'hover'}
|
||||
/> */}
|
||||
</FormItem>
|
||||
<FormItem label="More Settings">
|
||||
<Checkbox
|
||||
|
||||
@@ -14,6 +14,8 @@ export function SoundsTab() {
|
||||
const sounds = useStore(soundMap);
|
||||
const { soundsFilter } = useSettings();
|
||||
const [search, setSearch] = useState('');
|
||||
const { BASE_URL } = import.meta.env;
|
||||
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
|
||||
|
||||
const soundEntries = useMemo(() => {
|
||||
if (!sounds) {
|
||||
@@ -37,6 +39,9 @@ export function SoundsTab() {
|
||||
if (soundsFilter === 'synths') {
|
||||
return filtered.filter(([_, { data }]) => ['synth', 'soundfont'].includes(data.type));
|
||||
}
|
||||
if (soundsFilter === 'importSounds') {
|
||||
return [];
|
||||
}
|
||||
return filtered;
|
||||
}, [sounds, soundsFilter, search]);
|
||||
|
||||
@@ -51,7 +56,6 @@ export function SoundsTab() {
|
||||
ref?.stop(getAudioContext().currentTime + 0.01);
|
||||
});
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
|
||||
<Textbox placeholder="Search" value={search} onChange={(v) => setSearch(v)} />
|
||||
@@ -65,9 +69,9 @@ export function SoundsTab() {
|
||||
drums: 'drum-machines',
|
||||
synths: 'Synths',
|
||||
user: 'User',
|
||||
importSounds: 'import-sounds',
|
||||
}}
|
||||
></ButtonGroup>
|
||||
<ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 max-h-full grow overflow-auto text-sm break-normal pb-2">
|
||||
@@ -101,7 +105,55 @@ export function SoundsTab() {
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{!soundEntries.length ? 'No custom sounds loaded in this pattern (yet).' : ''}
|
||||
{!soundEntries.length && soundsFilter === 'importSounds' ? (
|
||||
<div className="prose dark:prose-invert min-w-full pt-2 pb-8 px-4">
|
||||
<ImportSoundsButton onComplete={() => settingsMap.setKey('soundsFilter', 'user')} />
|
||||
<p>
|
||||
To import sounds into strudel, they must be contained{' '}
|
||||
<a href={`${baseNoTrailing}/learn/samples/#from-disk-via-import-sounds-folder`} target="_blank">
|
||||
within a folder or subfolder
|
||||
</a>
|
||||
. The best way to do this is to upload a “samples” folder containing subfolders of individual sounds or
|
||||
soundbanks (see diagram below).{' '}
|
||||
</p>
|
||||
<pre className="bg-background" key={'sample-diagram'}>
|
||||
{`└─ samples <-- import this folder
|
||||
├─ swoop
|
||||
│ ├─ swoopshort.wav
|
||||
│ ├─ swooplong.wav
|
||||
│ └─ swooptight.wav
|
||||
└─ smash
|
||||
├─ smashhigh.wav
|
||||
├─ smashlow.wav
|
||||
└─ smashmiddle.wav`}
|
||||
</pre>
|
||||
<p>
|
||||
The name of a subfolder corresponds to the sound name under the “user” tab. Multiple samples within a
|
||||
subfolder are all labelled with the same name, but can be accessed using “.n( )” - remember sounds are
|
||||
zero-indexed and in alphabetical order!
|
||||
</p>
|
||||
<p>
|
||||
For more information, and other ways to use your own sounds in strudel,{' '}
|
||||
<a href={`${baseNoTrailing}/learn/samples/#from-disk-via-import-sounds-folder`} target="_blank">
|
||||
check out the docs
|
||||
</a>
|
||||
!
|
||||
</p>
|
||||
<h3>Preview Sounds</h3>
|
||||
<pre className="bg-background" key={'sample-preview'}>
|
||||
n("0 1 2 3 4 5").s("sample-name")
|
||||
</pre>
|
||||
<p>
|
||||
Paste the line above into the main editor to hear the uploaded folder. Remember to use the name of your
|
||||
sample as it appears under the "user" tab.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{!soundEntries.length && soundsFilter !== 'importSounds'
|
||||
? 'No custom sounds loaded in this pattern (yet).'
|
||||
: ''}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -3,7 +3,10 @@ import cx from '@src/cx.mjs';
|
||||
export function Textbox({ onChange, className, ...inputProps }) {
|
||||
return (
|
||||
<input
|
||||
className={cx('p-1 bg-background rounded-md my-2 border-foreground', className)}
|
||||
className={cx(
|
||||
'p-2 bg-background rounded-md border-foreground text-foreground placeholder-foreground',
|
||||
className,
|
||||
)}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
{...inputProps}
|
||||
/>
|
||||
|
||||
@@ -54,25 +54,23 @@ export function registerSamplesFromDB(config = userSamplesDBConfig, onComplete =
|
||||
splitRelativePath[splitRelativePath.length - 2] ?? soundFile.id.split(/\W+/)[0] ?? 'user';
|
||||
const blob = soundFile.blob;
|
||||
|
||||
// Files used to be uploaded as base64 strings, After Jan 1 2025 this check can be safely deleted
|
||||
if (typeof blob === 'string') {
|
||||
const soundPaths = sounds.get(parentDirectory) ?? new Set();
|
||||
soundPaths.add(blob);
|
||||
sounds.set(parentDirectory, soundPaths);
|
||||
return;
|
||||
}
|
||||
|
||||
return blobToDataUrl(blob).then((soundPath) => {
|
||||
const soundPaths = sounds.get(parentDirectory) ?? new Set();
|
||||
soundPaths.add(soundPath);
|
||||
sounds.set(parentDirectory, soundPaths);
|
||||
const titlePathMap = sounds.get(parentDirectory) ?? new Map();
|
||||
|
||||
titlePathMap.set(title, soundPath);
|
||||
|
||||
sounds.set(parentDirectory, titlePathMap);
|
||||
return;
|
||||
});
|
||||
}),
|
||||
)
|
||||
.then(() => {
|
||||
sounds.forEach((soundPaths, key) => {
|
||||
const value = Array.from(soundPaths);
|
||||
sounds.forEach((titlePathMap, key) => {
|
||||
const value = Array.from(titlePathMap.keys())
|
||||
.sort((a, b) => {
|
||||
return a.localeCompare(b);
|
||||
})
|
||||
.map((title) => titlePathMap.get(title));
|
||||
|
||||
registerSound(key, (t, hapValue, onended) => onTriggerSample(t, hapValue, onended, value), {
|
||||
type: 'sample',
|
||||
|
||||
@@ -115,6 +115,29 @@ export async function prebake() {
|
||||
'numbers/7.wav',
|
||||
'numbers/8.wav',
|
||||
],
|
||||
num: [
|
||||
'num/00.wav',
|
||||
'num/01.wav',
|
||||
'num/02.wav',
|
||||
'num/03.wav',
|
||||
'num/04.wav',
|
||||
'num/05.wav',
|
||||
'num/06.wav',
|
||||
'num/07.wav',
|
||||
'num/08.wav',
|
||||
'num/09.wav',
|
||||
'num/10.wav',
|
||||
'num/11.wav',
|
||||
'num/12.wav',
|
||||
'num/13.wav',
|
||||
'num/14.wav',
|
||||
'num/15.wav',
|
||||
'num/16.wav',
|
||||
'num/17.wav',
|
||||
'num/18.wav',
|
||||
'num/19.wav',
|
||||
'num/20.wav',
|
||||
],
|
||||
},
|
||||
'github:tidalcycles/dirt-samples',
|
||||
{
|
||||
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
resetLoadedSounds,
|
||||
initAudioOnFirstClick,
|
||||
} from '@strudel/webaudio';
|
||||
import { getAudioDevices, setAudioDevice, setVersionDefaultsFrom } from './util.mjs';
|
||||
import { setVersionDefaultsFrom } from './util.mjs';
|
||||
import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
|
||||
import { clearHydra } from '@strudel/hydra';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
@@ -28,7 +28,7 @@ import {
|
||||
setViewingPatternData,
|
||||
} from '../user_pattern_utils.mjs';
|
||||
import { superdirtOutput } from '@strudel/osc/superdirtoutput';
|
||||
import { audioEngineTargets, defaultAudioDeviceName } from '../settings.mjs';
|
||||
import { audioEngineTargets } from '../settings.mjs';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { prebake } from './prebake.mjs';
|
||||
import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
|
||||
@@ -36,11 +36,11 @@ import './Repl.css';
|
||||
import { setInterval, clearInterval } from 'worker-timers';
|
||||
import { getMetadata } from '../metadata_parser';
|
||||
|
||||
const { latestCode } = settingsMap.get();
|
||||
const { latestCode, maxPolyphony, audioDeviceName } = settingsMap.get();
|
||||
let modulesLoading, presets, drawContext, clearCanvas, audioReady;
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
audioReady = initAudioOnFirstClick();
|
||||
audioReady = initAudioOnFirstClick({ maxPolyphony, audioDeviceName });
|
||||
modulesLoading = loadModules();
|
||||
presets = prebake();
|
||||
drawContext = getDrawContext();
|
||||
@@ -159,20 +159,6 @@ export function useReplContext() {
|
||||
editorRef.current?.updateSettings(editorSettings);
|
||||
}, [_settings]);
|
||||
|
||||
// on first load, set stored audio device if possible
|
||||
useEffect(() => {
|
||||
const { audioDeviceName } = _settings;
|
||||
if (audioDeviceName !== defaultAudioDeviceName) {
|
||||
getAudioDevices().then((devices) => {
|
||||
const deviceID = devices.get(audioDeviceName);
|
||||
if (deviceID == null) {
|
||||
return;
|
||||
}
|
||||
setAudioDevice(deviceID);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
//
|
||||
// UI Actions
|
||||
//
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { evalScope, hash2code, logger } from '@strudel/core';
|
||||
import { settingPatterns, defaultAudioDeviceName } from '../settings.mjs';
|
||||
import { getAudioContext, initializeAudioOutput, setDefaultAudioContext, setVersionDefaults } from '@strudel/webaudio';
|
||||
import { settingPatterns } from '../settings.mjs';
|
||||
import { setVersionDefaults } from '@strudel/webaudio';
|
||||
import { getMetadata } from '../metadata_parser';
|
||||
import { isTauri } from '../tauri.mjs';
|
||||
import './Repl.css';
|
||||
@@ -160,38 +160,6 @@ export const isUdels = () => {
|
||||
return window.top?.location?.pathname.includes('udels');
|
||||
};
|
||||
|
||||
export const getAudioDevices = async () => {
|
||||
await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
let mediaDevices = await navigator.mediaDevices.enumerateDevices();
|
||||
mediaDevices = mediaDevices.filter((device) => device.kind === 'audiooutput' && device.deviceId !== 'default');
|
||||
const devicesMap = new Map();
|
||||
devicesMap.set(defaultAudioDeviceName, '');
|
||||
mediaDevices.forEach((device) => {
|
||||
devicesMap.set(device.label, device.deviceId);
|
||||
});
|
||||
return devicesMap;
|
||||
};
|
||||
|
||||
export const setAudioDevice = async (id) => {
|
||||
let audioCtx = getAudioContext();
|
||||
if (audioCtx.sinkId === id) {
|
||||
return;
|
||||
}
|
||||
await audioCtx.suspend();
|
||||
await audioCtx.close();
|
||||
audioCtx = setDefaultAudioContext();
|
||||
await audioCtx.resume();
|
||||
const isValidID = (id ?? '').length > 0;
|
||||
if (isValidID) {
|
||||
try {
|
||||
await audioCtx.setSinkId(id);
|
||||
} catch {
|
||||
logger('failed to set audio interface', 'warning');
|
||||
}
|
||||
}
|
||||
initializeAudioOutput();
|
||||
};
|
||||
|
||||
export function setVersionDefaultsFrom(code) {
|
||||
try {
|
||||
const metadata = getMetadata(code);
|
||||
|
||||
@@ -3,8 +3,6 @@ import { useStore } from '@nanostores/react';
|
||||
import { register } from '@strudel/core';
|
||||
import { isUdels } from './repl/util.mjs';
|
||||
|
||||
export const defaultAudioDeviceName = 'System Standard';
|
||||
|
||||
export const audioEngineTargets = {
|
||||
webaudio: 'webaudio',
|
||||
osc: 'osc',
|
||||
@@ -36,10 +34,10 @@ export const defaultSettings = {
|
||||
isPanelOpen: true,
|
||||
togglePanelTrigger: 'click', //click | hover
|
||||
userPatterns: '{}',
|
||||
audioDeviceName: defaultAudioDeviceName,
|
||||
audioEngineTarget: audioEngineTargets.webaudio,
|
||||
isButtonRowHidden: false,
|
||||
isCSSAnimationDisabled: false,
|
||||
maxPolyphony: 128,
|
||||
};
|
||||
|
||||
let search = null;
|
||||
|
||||
Reference in New Issue
Block a user