Skip to content
Generalized module for creating WebMIDI CC Controllers
JavaScript HTML
Branch: master
Clone or download


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...
You can’t perform that action at this time.