DigiChain - web app for making sample chains

DigiChain is a web app made to make the creation of sample chains as easy as possible for use on the Digitakt (and any other sampler that can slice-up samples).

Create drum kits for the OP-1 Field / OP-Z.

Automatic creation of .ot slice data files when exporting as 44.1k 16/24 bit.

https://digichain.brianbar.net/

Please make sure you are running the latest browser version available.

  • Chrome / Edge 113.x.x (or other mainline Chromium based browser)
  • Safari 16.3 / WebKit-7616.1.11.3

Other browsers have no verified support, and I have no plans (or spare time) to test, verify, and fix things for those browsers.

OT Exports

OP-1 Field Kits


v1.4.1 Changes

  • Added truncate selected action (shift+click to set a custom length), and crop to selection in the editor panel.
  • Fixed bug playing back sample after editing in the edit panel if the sample was currently playing from the list.
  • Prep-work for Microsoft store submission.

v1.4.0 Changes

  • Workflow to support reading slices from and creating chains for the Teenage Engineering OP-1 Field / OP-Z

    • OP-1 / OP-1 Field / OP-Z aif file imports, mono and stereo.
    • Slice from OP-1 / OP-1 Field / OP-Z drum-kit aif files.
    • OP-1 Field and OP-Z drum kit and single file exports with the aif 44.1/16 mono/stereo options.
    • OP-1 Field L/R A/B toggle and value setting from the list when in 44.1/16 Stereo Aif context. (double-click to toggle).
    • Slice from tape.json (OP-1 Field tape file slice markers) in the slice panel.
    • Merge All Selected action - mixes down all the selected items into one sample (enables creating files with different samples on the L/R for use with OP-1 Field’s A/B drum kit option.
  • Automatic creation of Octatrack .ot meta files in 44.1 16/24 stereo non-aif audio contexts. (toggle in settings).

  • Audio editor panel overhaul.

    • Added 1x, 2x, 4x zoom levels for the waveform.
    • Added loop playback button to editor panel.
    • Fade in/out/silence tools.
  • UI Improvements

    • Added playback indicator icon and play-head marker to waveforms in the list view.
    • Shift+Click on the row sample select box will select all the samples in-between (inclusive of the highlighted and the clicked sample). Ctrl+Shift+Click will de-select.
    • Shift+Click Column Header : Sorts the list, but will keep the selected items grouped to the top of the list.
    • Shift+Click Reset Button : Randomizes the order of the list.
    • Numeric keys 1 - 0 play the first 10 selected samples from the list.
    • Alt + numeric key / P key stops the playback and looping of that single sample.
    • Showing the sample name from DC slice data in title of slices on slice panel.
    • Double-click to remove a slice before processing slices on the slice panel.
    • Ctrl+Click the slice sample row icon to clear any related sample slice data.
    • E key opens the edit panel for the currently highlighted sample. Shift+E opens the editor panel for the currently highlighted sample, with the file name and path inputs editable, and the filename input keyboard focused.
    • Basic note detection from filename for sorting the list.
    • Reworked layout for better rendering on smaller screen devices.
    • Added a light theme for users who don’t like dark themes, toggled in the settings panel (first launch will set from the devices system color preference).
    • Custom filenames panel, add a list of custom filenames to use - once all names have been used, DigiChain will fall back to the default naming convention.
  • Settings on the settings panel are saved to local-storage and will persist when the app re-opens.

    • Allow disabling slice embed in settings.
    • Option to play pop-markers at the start and end of the sample for direct sampling to the Digitakt audio inputs. Two options, 0db markers (which prevents the DT’s auto normalization from changing the recorded sample volume), and peak, which sets the pop-marker volumes to match the loudest peak in the sample.
    • Show/hide touch modifier buttons in options panel.
    • Restore last used sample rate/bit depth/channel selection in options.
    • Option to normalize text/waveform color contrast in the settings panel.
  • DC slice format embedded in output chain wav file so user can restore the chains to slices retaining the input filename.

  • Support for importing webm and m4a audio files.

  • Added ‘Difference (Side)’ stereo -> mono processing option.

  • Trim All Selected action.

  • Reverse All Selected action.

  • Normalize All Selected action.

  • Pitch Up by an Octave All Selected action.

  • Enabled 32bit float wav exports.

  • Allow importing of 16bit aif files (parser written to accomodate importing from TE devices, but should be ok on other exported aif files, testing with Ableton Live exports and worked as expected, ymmv).

  • Split chained files at 12s (mono) or 20s (stereo) lengths mode. Sample order will loosely follow the list order, but it will try to fit smaller samples into the chain up to the max limit from further down the selected items in the list, so some samples may be out of order depending on their length and where they could be slotted into each chain to use up the time in the best way possible.

  • Removing arraybuffers before removal of files to help free memory usage sooner.

  • Ctrl+Click on the max length per chain in seconds to set a custom limit.

  • Bugfixes

    • Fixed bug where file path changes were not persisted.
    • Prevent pitch-up crashing when doubling a very small audio buffer.
    • Checking for suspended audio-context and resuming if suspended before playback.
    • Checking audio context state before importing files, resuming if possible.
    • Fixed bug where joining chains together with single additional sample between caused the slice offsets to be incorrect.
    • Removing multiple and sorts will stop sample playback (audioCtx caused pops when in these situations previously).
    • Fixed bug where a non-standard wav file PAD chunk caused a page crash.
    • Adding a _n char/number to the end of duplicated files name (as exporting to zip overwrites same filename files).
      Importing the same file will also increment the filename.
    • Fixed bug where resampling a new chain with a global pitch modifier and embed slices disabled would cause the new pitched audio buffer to fail rendering.
    • Fixed bug in the reading of AIFC aif files.
    • Don’t mute samples when toggling selection.

v1.3.0 Changes
  • Importing of folders - recursive search for wav/syx files (be careful with filesize/depth of folders with this!).
  • OT slices import from accompanying .ot file.
  • Show source folder path on list, filenames will now include this path in their name if present - joined files will have the path of the first item in the chain in its name.
  • Moved the UI around again, added the ability to hide the top buttons panel (which are now fixed).
  • Multi-file/joined downloads will now be downloaded as a single zip file (can be put back to multi-single file prompts in the settings panel).
  • Grid-view mode for those who dislike tables. (Shift+G)
  • Swapped Shift/Ctrl coloring, added css transition on toggle.
  • Added slice-count to end of chain filenames.
  • Changed ‘sort by selected icon’ to a text value.
  • Added sort by slice# to make building mega-break chains easier.
  • Indicator on row/grid of end of joined chain based on slice-grid selection.
  • Waveform and slice marker visual preview before slicing a file from the list into new samples.
  • Basic transient detection on the slice grid panel (for samples less than ~128 seconds).
  • Edit panel with file name/path editing, waveform view, play/stop controls.
  • Normalize, trim right, reverse, half-speed, and double-speed (destructive) sample edit operations.
  • Allow dropping of wav url links to be fetched (works with domains that allow CORS).
  • Export settings panel with pitch up export setting (1, 2, or 3 octaves) and the zip file on/off toggle.
  • Added offline support and install as app from the browser.

v1.2.0 Changes
  • Added support for slicing files in the list into new items.
  • Added the ability to resample joined files back into the list instead of downloading.
  • Sample import times are about a third faster than previously.
  • Support for drag-drop reordering of the list.
  • Show selected/total length times in the length header.
  • Added a bunch more keyboard shortcuts.
  • Allow changes to stereo/mono and bit depth, as it’s only the sample-rate that makes things wonky. [Only sample rate changes will trigger the list to clear.]
  • Show selected/total length times in the length header.
  • Fixed waveform double first render bug.
  • Tweaked height of waveform views.
  • Fixed bug in sorting selected by items.
  • Keyboard commands for managing the list (see keyboard-shortcuts.md).
  • Shift / Ctrl lock buttons so mobile/tablet users can access the secondary (keyboard shortcut) functions.
  • Improved drag-drop from the files app on iPadOS when in side-by-side mode.

Full Change Log


Updated Keyboard Shortcuts
  • Up / Down Arrow Keys: when a sample row is highlighted, this changes the highlighted sample.
  • P : plays the currently highlighted sample in the list.
  • I : inverts the selected items in the list.
  • Escape : closes any open dialog windows and stops all sample playback.
  • Enter / Return : toggles the selection of the currently highlighted sample in the list.
  • L / S / R / D : changes the channel for stereo files being processed to mono.
  • Number keys 1 through 0 : play the selected sample in the position of the key with 0 == 10.
  • E: Opens the edit panel for the currently highlighted sample.

Shift + Click / Shift + Key

  • Up / Down Keys : moves the highlighted sample up or down in the list.
  • P : plays the currently highlighted sample looped.
  • Waveform View : plays the sample looped, click again to go back to one-shot.
  • Slice Grid Number & Off Buttons : changes the slice grid size, but keeps the selected samples in the list.
  • Duplicate Icon : puts the duplicated file at the end of the sample list.
  • Move Up Icon : moves directly to the top of the sample list.
  • Move Down Icon : moved directly to the end of the sample list.
  • L S R D Options : sets all stereo samples method for mono conversion (take left, right, or sum to mono).
  • Download All : processed files will have the imported folder structure flattened into their file names (all files will be at the root level of the zip file).
  • Joined / Joined Spaced : audio will be resampled internally back to the list instead of prompting to save as a file (clicking the filename in the list will still allow the wav download).
  • H : Toggles showing/hiding the top buttons panel, to give more space for the grid.
  • Slice Sample Options: Will put the slices in the list directly below the source sample.
  • G : Toggles grid-view/list-view (grid-view is now the default for narrow screen width devices like phones).
  • Column Header : Sorts the list, but will keep the selected items grouped to the top of the list.
  • Reset Button : Randomizes the order of the list.
  • Check Sample Row Button : Will select all samples between the highlighted sample and the clicked sample (inclusive). Ctrl+Shift+Click will de-select.
  • E : Opens the editor panel for the currently highlighted sample, with the file name and path inputs editable, and the filename input keyboard focused.

Ctrl + Click

  • Slice Grid Number Buttons : prompts to enter a custom value for the slice grid.
  • Slice Grid Off Button : restores the default slice grid options.
  • Time Limit : prompts to enter a custom value for the timed chain lengths when that mode is enabled.
  • Row Slice Icon : Clear any related slice data.

Alt + Key

  • Number 1 - 0, P : Stops the playback and looping of the sample.

More info -> DigiChain v1.3.0 – brianbar.net



If you want to take a look at how things are progressing, you can use the development branch https://digichain.brianbar.net/latest/ - this may be broken at any point, but will be more frequently updated as I work on the project.

117 Likes

Also, while this is a web app, it all runs locally - no data is sent anywhere, and the samples don’t leave your computer.

8 Likes

This is so great - thank you.
I don’t have a digitakt, but there is a similar functionality on the m8 and this is great for that.
It looks so clean and very easy to understand.

Thank you!

2 Likes

thank you.

1 Like

This looks amazing. Fantastic work! And a massive shoutout for sharing with your peers!

2 Likes

this is amazing. thanks a million Brian :partying_face::space_invader:

2 Likes

thanks brian, this is great!

2 Likes

Great! Thank you!

1 Like

As a massive fan of OctaChainer, it’s cool to see this is a web app as it means I don’t need a program installed to make slice chains, and I could theoretically use it on my phone/tablet.

1 Like

At the moment, this is focused on the Digitakt, so all output is to 48k/16bit mono. no longer the case.

If you load up a stereo file, it will by default use the left channel, with the option per sample to change that between left, right or summed. edit: Stereo samples are now supported as stereo exports when the session is set to a stereo out option.

And while it does work on Android, the waveform view isn’t rendered correctly, and the up/down sample list position buttons are weird, and the UI needs some changes to scale better at lower screen sizes (all of which I’m taking a look at this evening after work, as I want to be able to use it on my Samsung phone). These issues are resolved.

I did take a peek at the OctaChainer .ot file struct on that projects github source, it looks straightforward enough to port to JavaScript. I do also have an OT, so once I’m happy with the DT features I may add some OT specific stuff here too, but as there is already OctaChainer for that use-case, I figured focusing on DT stuff is more useful.

9 Likes

And surprisingly, it works as it does on the desktop on my iPad, the only issue I see on iOS, is the sample length sort isn’t accurate, which I will fix later issues resolved.

9 Likes

Awesome work!
I truly believe we’re still just scratching the surface with web tech.
I had been working on a now abandoned Song mode/arranger for digis that ran from a web app, but I’m no web programmer so didnt get far.
Did you write this in js or compile to wasm via something like rust?

2 Likes

Thanks! This is all vanilla JavaScript with HTML/CSS for the UI and HTML Canvas for the waveform view.

I had downloaded all the MD sound-packs from the Elektron shop on Sunday, and was having a hard time converting those files to .wav to load onto my Digitakt, so I had a dig into how to convert those files, found some C++ on GitHub where someone else had already figured out how to parse the binary, I re-wrote that in JavaScript and then learned some stuff about the web audio API’s (I’ve only ever done audio programming with CSound before).

Then it was a case of, “wouldn’t it be neat to join these samples into a chain for the DT slice grid?”, and so it grew from there.

I’ve been working on it most of Sunday, then every evening this week after work.

I made a MIDI spreader last month (https://brian3kb.github.io/midi-spreader/) using web-midi to spread notes over multiple channels, I plan to add some form of MIDI support to this once the existing bugs and audio processing bits I have in mind are done.

10 Likes

Is this so you can use Digitakt as an 8 voice poly synth? (that is if all 8 tracks have the same Sound assigned)

Yep - I was too cheap to buy an RK-003 cable, so I made that instead lol

2 Likes

haha, me too. But I previously used a Mosaic script on iPad, so I was actually too lazy and cheap :rofl:

1 Like

can you quickly explain the midi spreader? sorry my mind is a bit blown.

1 Like

Sure - before you open it, make sure you have your MIDI devices powered on and connected.

Choose the channel to receive MIDI from (all devices in the input list will have their input on this channel go out to the selected output channels to the chosen output device only).

Click the boxes to choose the channels to send out MIDI on (you can’t choose the input channel for obvious reasons!).

Choose the output device in the MIDI output list, this is the only device that will receive the spread notes.

When you play notes, the input device will highlight, and the output channels will highlight to show things are working:

4 Likes

Thanks so much, really appreciate the information and the access to the utilities. As per the conditions of use, are you step recording the note spread into the dt sequencer?

It’s just forwarding notes from one channel to the others, it doesn’t know about the device receiving the MIDI (other than its ID and name).

Live recording works great on my Syntakt/Digitakt to record MIDI at the same time on multiple tracks, I’m not sure how that works in step-record mode tbh (and my Elektron gear isn’t to hand at the moment to test it out).

1 Like