Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Generalized module for creating WebMIDI CC Controllers

This is still very much in beta right now - although I don't expect to make breaking changes at this point, I'm not making promises


Include the library, initialise it during onload:

<!DOCTYPE html>
        <script src="../script/ccynthmata.js" type="text/javascript"></script>
            // doing it this way is useful for debugging in the console as you can call on the cynth object
            var cynth;
            let init = ()=>{cynth = new Ccynthmata(); cynth.init();}
    <body onload="init()">
        <!-- ...etc... -->

Add some divs for the standard interface elements to be added to:

    <div class="controlitemgroup" id="midiSetup">
        <h3>Midi Device Setup</h3>
    <div class="controlitemgroup" id="saveLoadPanel">

Add controls with the midiccparam class, give it a CC number to control with the data-cclsb attribute:

    class="midiccparam" data-cclsb="63"
    max="127" min="0" type="range" >

If you need to target a specific channel, rather than the one selected in the interface use data-midiChannel

    class="midiccparam" data-cclsb="63"
    max="127" min="0" type="range" >

If you have 14-bit CCs specify the MSB CC with data-ccmsb

    class="midiccparam" data-cclsb="63" data-ccmsb="31"
    max="16383" min="0" type="range" >

For a more complete working example see my Volca Drum Editor

Constructor Options

The Ccynthmata contructor optionally takes an options object as an argument, which may contain the following options:

  • interfaceRoot: element for the root of the interface (default: document)
  • setupPanelElement: element for the midi setup panel (default: the element that matches #midiSetup within interfaceRoot)
  • saveLoadPanelElement: element for the save/share panel (default: the element that matches #saveLoadPanel within interfaceRoot)
  • parameterDisplayElement: element for parameter value display (default: the element that matches #ccParameterDisplay within interfaceRoot)
  • autoHideParameterDisplay: hide the parameter display when it is not being shown (after a timeout) (default: false)
  • initPatch: intial patch, in the same format as the output of collectPatch() (default: null)


  • Write the rest of the documentation
  • Parameter display.

Known Issues / Notes / Caveats

  • midiCcTotal only works properly for checkable controls (radio-buttons are the obvious use-case). This may be a feature rather than a bug...


Generalized module for creating WebMIDI CC Controllers




No releases published


No packages published