K-Mix is one of the most powerful audio mixers available. One of K-Mix’s most powerful features is its ability to be programmed and controlled from any DAW. With the power of Web MIDI in your browser and the K-Mix API, K-Mix becomes the first audio mixer that’s fully controllable with JavaScript. In Part 1, I’ll go over the basics of using the K-Mix API and using K-Mix as a control surface for a web app.
With the exceptions of channel soloing, fader grouping, and Aux Pre/Post switches, nearly all K-Mix parameters can be controlled via MIDI messages sent to K-Mix***. K-Mix has 3 MIDI Bank modes in addition to the main Mix Bank, which gives you a total of 32 faders, 12 rotaries, and 87 buttons of assignable controls.
***Note: sending MIDI messages to K-Mix is supported in the latest 1.1.0 update. Sending MIDI messages to K-Mix for LED and audio mixer functions will be covered in Part 2 of this post.
*If you’re new to the Web MIDI API, please read my introductory overview of Web MIDI first Making Music in the Browser – Web MIDI API. Knowledge of JavaScript and using NPM is highly recommended. Currently, the only browsers that support Web MIDI are Chrome and Opera and since K-Mix is Mac only, please use Chrome/Opera on a Mac while using K-Mix with this demo.
Let’s get started!
Below is a simple Web MIDI / Web Audio mixer with our K-Mix demo song by Emmett Corman loaded up for you to play with. If you prefer, you can also drag n’ drop up to 8 audio files of your own. Without a K-Mix, you can still drag the rotaries, faders, and click on the transport controls to do a basic 8 channel mix (level and panning). With K-Mix connected, you can precisely control directly everything directly from K-Mix!
The faders control channels/tracks 1-8 and the master fader. The rotaries control panning for channels 1-4 and while holding down the EQ button, channels 5-8. All faders start from the off position and reset to off, when you press stop, rewind or play on the transport/diamond buttons. So after you press the diamond play button, start by turning up the master fader and then continue to the channel/track faders.
If you’re lucky enough to have a K-Mix on hand, plug it in and get mixing!
If you don’t have a K-Mix yet, you can watch the video below to see it in action:
Setup
Getting K-Mix setup to control anything in your browser only takes a few steps after connecting your K-Mix to your computer:
1. Install the K-Mix API, into your project using NPM:
npm install k-mix-api --save
2. Get the MIDI object from the browsers’ requestMIDIAccess method:
let midi, kmix
// get our midiAccess object and assign to 'midi'
navigator.requestMIDIAccess({sysex: false}).then((midiAccess) => midi = midiAccess)
3. Pass in our MIDI Access object to KMIX(), which is our only required argument:
// pass our midi object to KMIX
kmix = KMIX(midi)
*You can also pass in options that map the controls on K-Mix to MIDI Channels, CC’s, and MIDI notes of your choosing in the K-Mix Editor’s MIDI tab. For the purposes of this demo, we’re using everything at its default setting.
Listening to Events
Now we’re all ready to listen to messages from K-Mix, but first let’s go over the 2 modes that K-Mix can be in for use with this API.
1. Audio Mixer, also referred to as Mix Bank mode.
2. MIDI Control Surface, referred to as MIDI Bank mode.
In short, the Mix Bank mode is everything concerned with K-Mix as an audio mixer; Audio I/O, DSP, Aux…We’ll explore this mode in Part 2.
MIDI Bank mode is for controlling a DAW, or other MIDI capable software, with K-Mix. Controlling K-Mix from software will be available soon.
In order to have K-Mix send out MIDI data to control software, you’ll need to put your K-Mix in one of its 3 MIDI Bank modes by pressing K-Mix’s ‘Shift’ button along with one of the diamond buttons labeled with a number. Consult the K-Mix Manual section 4.1.3 for more info.
K-Mix sends out events named for the control that is sending out data. For example, if you move the master fader, an event of ‘fader-master’ is sent out along with the fader data for that event. Setting up an event listener for fader-1 would be as simple as this:
kmix.on('fader-1', (data) => console.log('fader-1 data', data))
The returned data is an object with two properties, ‘value’ and ‘raw’. The ‘value’ property is the value or 2nd data bit in a MIDI message in the range of 0 – 127. The ‘raw’ property is the entire 3-byte MIDI i.e [176, 1 127]. Faders and Rotaries are all of type 176.
Listening for button events is similar to listening to faders and rotaries:
// listen for on/144 button messages. default
kmix.on('button-vu', (data) => console.log('button-vu', data))
Listening for button ‘off’ events:
// listen for off/128 button messages
kmix.on('button-vu:off', (data) => console.log('button-vu:off', data))
‘Any’ Event
If it seems like too much to setup event listeners for every single potential control, there’s the ‘any’ event which let’s you listen to any event that comes out of K-Mix. This way, you can build the logic of what controls what via conditionals/switch statements. The returned data from ‘any’ events is slightly different. There is a ‘control’ property, which tells you what control is sending data and then the ‘raw’ property, which is again, the entire 3 byte MIDI message.
// returns a data object with the name of the control and the raw MIDI message
kmix.on('any', (data) => {
console.log('control-name', data.control, 'control-data', data.raw)
// data.control == 'fader-1'
// the 3rd byte is the value byte
// data.raw == [176,1,67]
switch(data.control){
case 'fader-1':
console.log('fader-1', data.raw)
break;
case 'button-vu':
console.log('button-vu', data.raw)
break;
case 'button-vu:off':
console.log('button-vu:off', data.raw)
break;
}
})The complete list of control names can be found at the bottom of the documentation link below.
Complete API documentation can be found here: https://www.npmjs.com/package/k-mix-api
Help
There is a built-in help/reference system available in case you want a handy list of control names and CC messages by calling the ‘help’ method on your ‘kmix’ variable:
kmix.help('control') // 'control', 'input', 'main', 'misc'
This will output a formatted table with control names and cc/note values into your browser console.
Those are the basics of using K-Mix as a Web MIDI control surface. In part 2, we’ll cover how to control K-Mix!
Get mixing with K-Mix!
You can also play around with the app in fullscreen on your iOS device (without K-Mix and Web MIDI), here https://files.keithmcmillen.com/blog/webmidi/k-mix/mixer-demo/
The source code for this project is available here: https://github.com/keithmcmilleninstruments/k-mix-api-mixer-demo