Live audio-visual coding environment in JavaScript for the browser
demo.mp4
- Audio synthesys via multiple engines (Monosynth, Polysynth, FM synth ...)
- Video synthesys using Hydra Video Synth, P5.js and Marching.js
- Audio and video sequencing (gibber, step sequencing, tydalcycles/strudel)
- Over 40 tutorials and demos on how to use
- Over 3000 tunings and scales, see https://dilber.io/scales.html
- Sample sources supported:
local files, online files, microphone recording, musicgen AI model - Sample mangling (see sampler docs)
- Record samples with your mic/audio in using
recordMic(<seconds>), defaults to 5 seconds recordings - Generate samples locally with
musicgen(<prompt>,<shortname>)for more sample choices - Create your own synths with oscilators, envelopes, lfos and more...
- Supported sample formats are
wav, aif, mp3, aiff - Audio in via command:
FFT.startMic()- check Audio In tutorial - Audio effects (BitCrusher, Delay, Filter, Distortion, Flanger, Reverb, RingMod, Vibrato, Tremolo, Wavefolder)
- Video effects (Antialiasing, Bloom, Blur, Brightness, Contrast, Edges, Focus, Godrays, Motion Blur, Hue, Invert)
- Camera control (WASD, arrows)
- MouseX and MouseY tracking
- Works offline!
- Saving and loading your dilber files from computer
- MIDI out for your external or hardware synths
- Share your code with others instantly
- Custom toast messages when there is an error in the code
- Soundfont support (Asprin, Chaos, GeneralUserGS, and JCLive)
- Custom server support, check out server script
- Custom background via
bg(<url>)command - checkbackgroundstutorial in app - Sequence gifs via
bg.seq([image_array], [duration_array], random=true) - Record your audio (system+mic) and video performance via
recordSession()andstopSession() - Autosave - in case of a crash it stores your code accross sessions. Default interval is set to 30 minutes. It can be turned off or customized.
- Spectator mode - after creating a session in perform mode, a spectator link is copied to your clipboard. Paste it anyhere to invite people to spectate your performance live.
- [Soon] P2P realtime collaboration with shared editor and chat over secure sockets
-
Go to dilber.io and start dilbering!
-
Or go to Releases page and download the latest version
-
Or clone this repository and run it locally in VS Code using Live Server extension
Dilber uses keyboard shortcuts to control starting and stoping code, music and visuals. Make sure to get to know them first!
Windows // Mac commands:
Execute line of code: CTRL+ENTER // CONTROL+RETURN
Execute block of code: ALT+ENTER // COMMAND+RETURN
Execute page code: CTRL+A (then CTRL+ENTER) // COMMAND+A (then COMMAND+RETURN)
Stop all: CTRL+. or SHIFT+CTRL+. // CONTROL+. or SHIFT+CTRL+.
Save code: SHIFT+CTRL+S // SHIFT+CONTROL+S
Load code: SHIFT+CTRL+L // SHIFT+CONTROL+L
Zoom in: SHIFT+CTRL++ // SHIFT+CONTROL++
Zoom out: SHIFT+CTRL+- // SHIFT+CONTROL++
Edit pattern: ALT or OPTION + click on the pattern (crosshair cursor will show)
Toggle code background: SHIFT+ALT+B // CONTROL+OPTION+B
Toggle code visibility: CTRL+H // CONTROL+H
Toggle free camera (3D): SHIFT+CTRL+C // SHIFT+CONTROL+C (📹 icon when camera mode is active)
- 3D Raymarching
- Hydra
- P5.js
- Use a direct link to your sample as a parameter: Sampler('https://somewebsite.come/awesomesample.wav')
- Use any sound from Freesound.org library by ID:
Freesound(4048)
- Download samples by query:
Freesound('crickets')
- Get random samples:
Freesound({
query:'drums +90 +bpm', // search for drums, 90, and bpm
max:5, // max of five seconds in length
single:false, // files do not have to contain single sounds / notes
filename:false, // do not require query terms to be present in filename
count:5, // load five samples...
maxVoices:1 // ... but only play one at a time
})
- Clone this repo and put your samples in `samples` folder
- Open index.html on your local machine (you can use http-server or LiveServer in VS Code)
- Use it in your code like a normal instrument: Sampler('yoursample.wav')
or
- Use local audio model to generate new samples for you e.g. `musicgen('90s drum beat heavy 120 bpm', 'drum2')
- Use it in your code: Sampler('drum2.gen')
or
- Record a sample via microphone in your browser with `recordMic()` command
- Use it in your code: Sampler('<recording-name>.rec')
- Click on `midi out` button in top menu and select MIDI out device
- Send a MIDI NoteOn message with a value of 60 to channel 0: channels[0].midinote(60)
- See MIDI Out tutorial in Dilber for more!
- You can find server script here dilber-server
- Feel free to clone and setup your own server over SSL
- record your sessions (video and audio)
- background image sequencing
- musicgen-small AI model support for sample generation
- MIDI out support - controll your external synths with Dilber via WebMIDI
- Process audio/mic in for live reactivity
- Sample your audio/mic in
- UI fixes for popups and notifications
- Removed most of redundant code and unnecesary files
- P2P WebSockets now works properly over wss server
- Added audio in via FFT.StartMic() command
- Added MouseY and MouseY parametars for modulating things from 0.0 to 1.0
- Added Load and Save functionality so you can export or load dilber files from your computer
- Improved error catching and logging
- Fully static app, runs locally
- Simple folder structure:
./docs
./samples <-- your samples go here
./resources <-- all other files
index.html <-- main page
... many more
- Gibber for audio and graphics engine
- Tune.js for an extensive list of tunings. Visit https://dilber.io/scales.html
- Toastify.js for custom toast messages
- Vim.js for syntax highlighting
- CodeMirror for editor component
- Open dilber.io and take a look at examples/tutorial list (instructions are commented)
- Read the full documentation
- Buy me a coffee
- ETH: 0xe60Ce880010af7C449256B5f12521eb98fBDf5AD
MIT