HexaBoard

MIDI Settings

MIDI In:
MIDI Out:

Refresh Devices
Part of the MIDI functionality is made with jazz-soft.net - Thanks!

MIDI Recorder

BPM
Beats
Metronome
Loop
Save/Load Settings
Remove Channel 10
Record Audio

<h1>Open File</h1>
	<input>
		Example Files
		<input id="midiFileSelect" name="midi.file" type="options" placeholder="MIDI File" style="width:200px;"
onfocus="
var v = '';
//if( this.preValue)v = this.preValue;
this.value = v;
this.onkeyup();
"
onkeyup="
this.directory = '';
console.log( 'ku', this.directory, this.data);
showOptions( this, GUI.midiFiles);
if( this.value)this.preValue = this.value;
"
onchange="
if( !this.data){
	if( this.value){
		buPla.buffer.name = this.value;
		GUI.applyConf( 'buPla.file', this.value);
		console.log( this.value, this.data);
		this.preValue = this.value;
	}else{
		this.value = this.preValue;
	}
	return;
}
console.log( 'oc', this.directory, this.data);
if( this.data[0].indexOf( '.') == -1){
	showOptions( this, '?call=ls:content/midi/'+this.directory);
	this.directory += this.data[0]+'/';
	return;
}
GUI.midiImportFile( GUI.midiFilesDir+this.directory+this.data[0], this.value);
hideDialog();
"
onblur="
if( this.preValue)this.value = this.preValue;
"
/>
	 
	
	<hr/>
	From Web
	<input value="https://archive.org/details/the-midi-archive/4+Non+Blondes+-+What's+Going+On.mid" style="width:200px;" />
	<input type="button" onclick="var el = this.previousElementSibling; if( !el.value)return el.focus(); GUI.midiImportFile( el.value);" value="Load" />
	 
	
	<hr/>
	
	<img src="images/icons/folder_page.png" alt="" /> open local file
	<input type="file" id="localMidiFileInput" accept="audio/mid,audio/midi,audio/kar,audio/karaoke,audio/x-midi,audio/twap" style="display: none;" size=80
	onchange='GUI.midiImportFile( this);hideDialog();'>

Android

Many Devices with Android Version 7 and above offer a MIDI option when USB is connected to a PC or Android with OTG.
Disable the USB MIDI option before unplugging the wire or the device may require a reboot.

Windows

Tobias Erichsens virtual MIDI devices work great on Windows and with HexaBoard. - Thanks!
loopMIDI - connect HexaBoard to other Software on the same device.
rtpMIDI - connect HexaBoard to other devices on the network.

Sound Settings

SamplePlayer

<h2>Buffer Functions</h2>
		<form id="bufferFunctionForm" onunload="buPla.bufferDialog_close();">
				
		<li class="menu"><a class="button"> Audio File</a>
			<ul>
				<li onclick="uploadBuPla = buPla; this.lastElementChild.click();" title="import" accesskey="o">
					Import Audio File
					<input type="file" accept="audio/*" style="visibility:hidden;width:0px;height:0px;position:absolute;" capture onchange="uploadBuPla.handleFileInput( this);" /></li>
				<a onmousedown="JSAX.audio.buffer.download( buPla.buffer, this);" title="export"> Save WAV file</a>
			</ul>
		</li>

<li class="menu"><a class="button"> Edit</a>
			<ul>
				<li onclick="buPla.form.apply( this.title);" title="zoom"> Zoom Selection 🠕/🠗</li>
				<hr/>

<li onclick="buPla.form.apply( this.title);" title="cut"> Cut Ctrl+X</li>
				<li onclick="buPla.form.apply( this.title);" title="copy"> Copy Ctrl+C</li>
				<li onclick="buPla.form.apply( this.title);" title="paste"> Paste Ctrl+V</li>
				<li onclick="buPla.form.apply( this.title);" title="delete"> Delete Del</li>
				<li onclick="buPla.form.apply( this.title);" title="crop"> Crop ⟻</li>
				<li onclick="buPla.form.apply( this.title);" title="trim"> Trim</li>
				<li onclick="buPla.form.apply( this.title);" title="duplicate"> Duplicate Ctrl+D</li>
				<hr/>

<li onclick="buPla.form.apply( this.title);" title="select"> Invert Selection Ctrl+A</li>
				<li onclick="buPla.form.apply( this.title, 'a');" title="select"> Select All Ctrl+A</li>
				<li onclick="buPla.form.apply( this.title, 'n');" title="select"> Select None Ctrl+A</li>
				<li onclick="buPla.form.apply( this.title, 'n');" title="select"> Select Snap to zero </li>

</ul>
		</li>

<li class="menu"><a class="button"> Filters</a>
			<ul>
				<li onclick="buPla.form.apply( 'filter','normalize');"> Normalize</li>
				<li onclick="buPla.form.apply( 'filter','gain');"> gain</li>
				<li onclick="buPla.form.apply( 'filter','limit');"> limit</li>
				<li onclick="buPla.form.apply( 'filter','reversePolarity');"> reversePolarity</li>
				<li onclick="buPla.form.apply( 'filter','backwards');"> Backwards</li>
				<li onclick="buPla.form.apply( 'filter','fadein');"> Fadein</li>
				<li onclick="buPla.form.apply( 'filter','fadeout');"> Fadeout</li>
				<li onclick="buPla.form.apply( 'filter','zero');"> zero</li>
				<li><a onclick="buPla.form.apply( 'filter','sine');"> sine</a><ul>
					<li onclick="buPla.form.apply( 'filter','sine',{hz:220});"> 220</li>
					<li onclick="buPla.form.apply( 'filter','sine',{hz:440});"> 440</li>
					<li onclick="buPla.form.apply( 'filter','sine',{hz:880});"> 880</li>
				</ul></li>
				<li><a onclick="buPla.form.apply( 'filter','metronome relative');"> metronome</a><ul>
					<li onclick="buPla.form.apply( 'filter','metronome relative',{beats:2});"> 2</li>
					<li onclick="buPla.form.apply( 'filter','metronome relative',{beats:3});"> 3</li>
					<li onclick="buPla.form.apply( 'filter','metronome relative',{beats:4});"> 4</li>
					<li onclick="buPla.form.apply( 'filter','metronome relative',{beats:5});"> 5</li>
				</ul></li>
			</ul>
		</li>
		
		
		
			<a class="button" onclick="buPla.record();" style="color:darkred;"></a>
			<a class="button" onclick="uploadBuPla = buPla; this.nextSibling.click();">
			</a><input type="file" accept="audio/*" style="visibility:hidden;width:0px;position:absolute;" capture onchange="uploadBuPla.handleFileInput( this);" />
			<a class="button" onmousedown="JSAX.audio.buffer.download( buPla.buffer, this);" title="download"></a>

<h3>looper options</h3>
				Crop to ...
				<input name="duration_select" onfocus="showOptions( this, looper.lengthOptions());" onchange="" style="width:60px;" value="" placeholder="length ..." />
				<a class="button" onclick="
var l = this.previousElementSibling.value;
l = l.split( ',')[0];
l = parseFloat( l) *AC.sampleRate;
console.log( l);
buPla.applyBuffer( JSAX.audio.buffer.substr( buPla.buffer, 0, l));" title="crop"> do it</a>
				 
				<hr/>
			
			
			
				<a class="button" onclick="buPla.form.apply( this.title);" title="undo"></a>
				<a class="button" onclick="buPla.form.apply( this.title);" title="redo"></a>
				<a class="button" onclick="buPla.form.apply( this.title);" title="cut"></a>
				<a class="button" onclick="buPla.form.apply( this.title);" title="crop"></a>
			 
			
			
				<label><input class="play" name="prePlay" type="checkbox" onchange="buPla.form.playSelection();" /> Play</label>
				<label style="width: 85px;"><input name="magnet" type="checkbox" value="1" /> Snap</label>
			
			
				<a class="button" onclick="buPla.form.apply( this.title, 'l');" title="select"></a>
				<input name="selection_start" onchange="this.form.setSelection();" style="width:60px;" />
				
				<a class="button" onclick="buPla.form.apply( this.title);" title="zoom"> Zoom</a>
				
				<input name="selection_end" onchange="this.form.setSelection();" style="width:60px;" />
				<a class="button" onclick="buPla.form.apply( this.title, 'r');" title="select"></a>
				<a class="button hidden_looper" onclick="var b = buPla.form.bufferFragment; console.log( b); if( b)looper.createTrack( b);" title="add"></a>
			
			
			<div id="editorWaveDisplay"></div>

Duration
				<input name="duration" onchange="this.form.setSelection();" style="width:60px;" value="{duration}" /> seconds
				<input name="add_ms" onchange=";" style="width:60px;" value="50" />
				<a class="button" onclick="buPla.form.apply( this.title);" title="subtract"></a>
				<a class="button" onclick="buPla.form.apply( this.title);" title="add"></a>
				Remove/Add Ticks
			
			 
			
				<a class="button hidden_buPla" onclick="buPla.form.apply( this.title);" title="setLoop"></a>
				<a class="button" onclick="buPla.applyBuffer( JSAX.audio.buffer.normalise( buPla.buffer));" title="normalise"></a>
			
			 
			 
			
			<code>function( v, i, length, @o){</code>
	<input type="options" placeholder="Functions" style="width:200px;" onkeyup="
showOptions( this, bufferFunctionOptions);
this.preValue = this.value;
" onfocus="this.onkeyup();" onchange="
byId( 'bufferFunctionInput').value = this.data[0];
this.value = '';
" />
			<textarea name="code" id="bufferFunctionInput" style="height: 108px; width: calc( 100% - 20px); margin-left: 20px; font-size:12px;line-height:14px;" onchange="var a = this.value;">
return v *0.5;
</textarea>
<code>}</code> <a class="button" onclick="buPla.form.apply( this.title)" title="logic"> execute</a>
		<div id="bufferFunctionOutput"></div>
		</form>

Loop Start End
Volume Polyphony
Tuning Detune
A D S R

Synth1 Reset

Instances

In-/Export

Volume Polyphony
OSC
Detune
Ascend
A D S R

SoundFont (MIDI)

Select MIDI Instrument:

by Sergey Surikov
Thank you for all the graat work!

Tuning Reset

Start Sound Play

v20240120

HexaBoard info

Presets Tools Credits Feedback

Keyboard Commands:
Instead of Ctrl you can use Apple's Command key Apple

/ cmd

Knob:

Drag vertically to change Value.
Hold 2nd Finger, Shift or Ctrl to change Speed.
Tap quickly twice to enter a manual Value.

Field:

Focus to show option List on the left side.
Into some Fields You can type to filter the List or enter a manual Value.
You have to clear the entered Value to see the full List again.

force refresh debug

:root {
	--hb_color: {color};
	--hb_color_n: {color_n};
	--hb_color2: {color2};
	--hb_color2_n: {color2_n};
	--hb_color3: {color3};
	--hb_color3_n: {color3_n};
	--hb_color_hl: {color_highlight};
}
{paint_gui}:root {
	--color_gui: {color2};
	--color_gui_b: {color3};
}

#scrollContainer {
	left: {pos_x}px;
	top: {pos_y}px;
	transform: scale({pos_z});
}

div.hexaBoard b.key {
	background-color: {color};
	color: {color_n};
	--c: {color};
	--c2: tranparent;
}
div.hexaBoard.normal b.key.b.c,
div.hexaBoard b.key.b {
	background-color: {color2};
	--c: {color2};
	color: {color2_n};
}
div.hexaBoard b.key.c {
	background-color: {color3};
	--c: {color3};
	color: {color3_n};
}

#menu input[type=checkbox]:checked + i {
	background: {color_highlight};
}
input[value="0"] + span.bigIcons i.fa-plus,
input[value="1"] + span.bigIcons i.fa-plus + i.fa-asterisk,
input[value="2"] + span.bigIcons i.fa-asterisk + i.fa-asterisk,
input[value="piano"] + span.bigIcons i.fa-bars,
input[value="other"] + span.bigIcons i.fa-code,
input[value="html"] + span.bigIcons i.fa-code,
input[value="code"] + span.bigIcons i.fa-superscript,
input[value="function"] + span.bigIcons i.fa-superscript {
	color: {color_highlight};
}
body {
	background-color: {color2};
}

{paint_gui}input[type="checkbox"] + i,
{paint_gui}.bigIcons i.fa {
	color: {color3};
}
{paint_gui}.rotaryInput {
	background-color: {color};
	color: {color};
}
{paint_gui}.rotaryInput b {
	color: {color_n};
}
{paint_gui}hr {
	border-color: {color};
}
{paint_gui}div#dialogFrame .bar .buttonX,
{paint_gui}input[type="submit"],
{paint_gui}input[type="button"],
{paint_gui}button,
{paint_gui}.button,
{paint_gui}#dialogFrame .button,
{paint_gui}#menu .button {
	background-color: {color3};
	color: {color};
}
{paint_gui}input::placeholder {
	color: {color2_n};
}
{paint_gui}div#dialogFrame,
{paint_gui}div#dialogFrame .bar,
{paint_gui}#menu_m,
{paint_gui}#menu_l {
	background-image: linear-gradient( 170deg, #0009, #000D);
	background-color: {color3};
	color: white;
}
{paint_gui}h2 {
	color: {color};
}

{low_perf}#menu > div {
	background-image: none;
	background-color: #222222;
	box-shadow: none;
}
{low_perf}#menu_m {
	background-image: none;
	background-color: #222222;
	box-shadow: none;
	border-left: 1px solid black;
}
{low_perf}#scrollContainer {
	transition-duration: 0s;
}
{low_perf}body {
	background-image: none;
}
{low_perf}#hexaBoard b.key {
	box-shadow: none;
}
{low_perf}div#dialogFrame {
	background-color: #222222;
}

div.hexaBoard b.key.disabled {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
	color: #654;
}
{notes_disabled_hide}div.hexaBoard b.key.disabled {
	display: none;
}
div.hexaBoard.normal b.key.disabled {
	background:  #222;
}

Log

Clear

← → ↑ ↓	move area
Pg↑ Pg↓	Octave +/-

CSS - StyleSheets are not active.

Settings Wizzard

Notes

Layout

Board Settings