strumming-metronome
Version:
A simple JavaScript metronome for strumming practice.
890 lines (885 loc) • 29 kB
JavaScript
export const metronomeTables = {
44: `
<table id="measure-table">
<tr>
<td colspan="4">
<span id="beat1" class="metronome-beat"><strong>1</strong></span>
</td>
<td colspan="4">
<span id="beat2" class="metronome-beat"><strong>2</strong></span>
</td>
<td colspan="4">
<span id="beat3" class="metronome-beat"><strong>3</strong></span>
</td>
<td colspan="4">
<span id="beat4" class="metronome-beat"><strong>4</strong></span>
</td>
</tr>
<tr>
<td>
<button id="down-1.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.75"class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.75" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.75" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.75" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
</tr>
<tr>
<td colspan="16" class="strings-cell">
<hr class="guitar-string-6">
<hr class="guitar-string-5">
<hr class="guitar-string-4">
<hr class="guitar-string-3">
<hr class="guitar-string-2">
<hr class="guitar-string-1">
</td>
</tr>
<tr>
<td>
<button id="up-1.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
</tr>
</table>
`,
"44-triplet": `
<table id="measure-table">
<tr>
<td colspan="3">
<span id="beat1" class="metronome-beat"><strong>1</strong></span>
</td>
<td colspan="3">
<span id="beat2" class="metronome-beat"><strong>2</strong></span>
</td>
<td colspan="3">
<span id="beat3" class="metronome-beat"><strong>3</strong></span>
</td>
<td colspan="3">
<span id="beat4" class="metronome-beat"><strong>4</strong></span>
</td>
</tr>
<tr>
<td>
<button id="down-1.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
</tr>
<tr>
<td colspan="12" class="strings-cell">
<hr class="guitar-string-6">
<hr class="guitar-string-5">
<hr class="guitar-string-4">
<hr class="guitar-string-3">
<hr class="guitar-string-2">
<hr class="guitar-string-1">
</td>
</tr>
<tr>
<td>
<button id="up-1.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
</tr>
</table>
`,
34: `
<table id="measure-table">
<tr>
<td colspan="4">
<span id="beat1" class="metronome-beat"><strong>1</strong></span>
</td>
<td colspan="4">
<span id="beat2" class="metronome-beat"><strong>2</strong></span>
</td>
<td colspan="4">
<span id="beat3" class="metronome-beat"><strong>3</strong></span>
</td>
</tr>
<tr>
<td>
<button id="down-1.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.75"class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.75" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.25" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.75" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
</tr>
<tr>
<td colspan="12" class="strings-cell">
<hr class="guitar-string-6">
<hr class="guitar-string-5">
<hr class="guitar-string-4">
<hr class="guitar-string-3">
<hr class="guitar-string-2">
<hr class="guitar-string-1">
</td>
</tr>
<tr>
<td>
<button id="up-1.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.25" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.75" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
</tr>
</table>
`,
"34-triplet": `
<table id="measure-table">
<tr>
<td colspan="3">
<span id="beat1" class="metronome-beat"><strong>1</strong></span>
</td>
<td colspan="3">
<span id="beat2" class="metronome-beat"><strong>2</strong></span>
</td>
<td colspan="3">
<span id="beat3" class="metronome-beat"><strong>3</strong></span>
</td>
</tr>
<tr>
<td>
<button id="down-1.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.33" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.67" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
</tr>
<tr>
<td colspan="9" class="strings-cell">
<hr class="guitar-string-6">
<hr class="guitar-string-5">
<hr class="guitar-string-4">
<hr class="guitar-string-3">
<hr class="guitar-string-2">
<hr class="guitar-string-1">
</td>
</tr>
<tr>
<td>
<button id="up-1.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.33" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.67" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
</tr>
</table>
`,
68: `
<table id="measure-table">
<tr>
<td colspan="2">
<span id="beat1" class="metronome-beat"><strong>1</strong></span>
</td>
<td colspan="2">
<span id="beat2" class="metronome-beat"><strong>2</strong></span>
</td>
<td colspan="2">
<span id="beat3" class="metronome-beat"><strong>3</strong></span>
</td>
<td colspan="2">
<span id="beat4" class="metronome-beat"><strong>4</strong></span>
</td>
<td colspan="2">
<span id="beat5" class="metronome-beat"><strong>5</strong></span>
</td>
<td colspan="2">
<span id="beat6" class="metronome-beat"><strong>6</strong></span>
</td>
</tr>
<tr>
<td>
<button id="down-1.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-1.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-2.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-3.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-4.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-5.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-5.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-6.0" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
<td>
<button id="down-6.50" class="metronome-arrow-down-btn">
<i class="metronome-arrow-down-black-icon"></i>
</button>
</td>
</tr>
<tr>
<td colspan="16" class="strings-cell">
<hr class="guitar-string-6">
<hr class="guitar-string-5">
<hr class="guitar-string-4">
<hr class="guitar-string-3">
<hr class="guitar-string-2">
<hr class="guitar-string-1">
</td>
</tr>
<tr>
<td>
<button id="up-1.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-1.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-2.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-3.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-4.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-5.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-5.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-6.0" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
<td>
<button id="up-6.50" class="metronome-arrow-up-btn">
<i class="metronome-arrow-up-black-icon"></i>
</button>
</td>
</tr>
</table>
`
};
export const metronomeContainerHTML = `
<div id="metronome-controller">
<div id="metronome-time-signature-field" class="metronome-field">
<label for="metronome-time-signature">Time Signature:</label>
<select id="metronome-time-signature">
<option value="44">4/4</option>
<option value="34">3/4</option>
<option value="68">6/8</option>
</select>
</div>
<div id="metronome-subdivision-field" class="metronome-field">
<label for="metronome-subdivision">Subdivision:</label>
<select id="metronome-subdivision">
<option value="sixteenth">16th Notes</option>
<option value="triplet">Triplets</option>
</select>
</div>
<div id"bpm-unit-field" class="metronome-field">
<input id="bpm-input" type="number" value="60" min="30" max="300">
<span class="bpm-unit">bpm</span>
</div>
<button id="metronome-btn">
<i id="metronome-icon" class="metronome-play-icon"></i>
<span id="metronome-text">Play</span>
</button>
</div>
<div id="metronome-table">
</div>
`;
export const beatIds = {
44: ["beat1", "beat2", "beat3", "beat4"],
"44-triplet": ["beat1", "beat2", "beat3", "beat4"],
34: ["beat1", "beat2", "beat3"],
"34-triplet": ["beat1", "beat2", "beat3"],
68: ["beat1", "beat2", "beat3", "beat4", "beat5", "beat6"]
};
export const upQuarterBeatIds = {
44: [
"up-1.0", "up-1.25", "up-1.50", "up-1.75",
"up-2.0", "up-2.25", "up-2.50", "up-2.75",
"up-3.0", "up-3.25", "up-3.50", "up-3.75",
"up-4.0", "up-4.25", "up-4.50", "up-4.75"
],
"44-triplet": [
"up-1.0", "up-1.33", "up-1.67",
"up-2.0", "up-2.33", "up-2.67",
"up-3.0", "up-3.33", "up-3.67",
"up-4.0", "up-4.33", "up-4.67"
],
34: [
"up-1.0", "up-1.25", "up-1.50", "up-1.75",
"up-2.0", "up-2.25", "up-2.50", "up-2.75",
"up-3.0", "up-3.25", "up-3.50", "up-3.75"
],
"34-triplet": [
"up-1.0", "up-1.33", "up-1.67",
"up-2.0", "up-2.33", "up-2.67",
"up-3.0", "up-3.33", "up-3.67"
],
68: [
"up-1.0", "up-1.50",
"up-2.0", "up-2.50",
"up-3.0", "up-3.50",
"up-4.0", "up-4.50",
"up-5.0", "up-5.50",
"up-6.0", "up-6.50"
]
};
export const downQuarterBeatIds = {
44: [
"down-1.0", "down-1.25", "down-1.50", "down-1.75",
"down-2.0", "down-2.25", "down-2.50", "down-2.75",
"down-3.0", "down-3.25", "down-3.50", "down-3.75",
"down-4.0", "down-4.25", "down-4.50", "down-4.75"
],
"44-triplet": [
"down-1.0", "down-1.33", "down-1.67",
"down-2.0", "down-2.33", "down-2.67",
"down-3.0", "down-3.33", "down-3.67",
"down-4.0", "down-4.33", "down-4.67"
],
34: [
"down-1.0", "down-1.25", "down-1.50", "down-1.75",
"down-2.0", "down-2.25", "down-2.50", "down-2.75",
"down-3.0", "down-3.25", "down-3.50", "down-3.75"
],
"34-triplet": [
"down-1.0", "down-1.33", "down-1.67",
"down-2.0", "down-2.33", "down-2.67",
"down-3.0", "down-3.33", "down-3.67"
],
68: [
"down-1.0", "down-1.50",
"down-2.0", "down-2.50",
"down-3.0", "down-3.50",
"down-4.0", "down-4.50",
"down-5.0", "down-5.50",
"down-6.0", "down-6.50"
]
};
export const subdivisionConfigs = {
44: {
sixteenth: { beatDivide: 4, subBeatMultiply: 25, bpmMultiplier: 1 },
triplet: { beatDivide: 3, subBeatMultiply: 33, bpmMultiplier: 1 }
},
34: {
sixteenth: { beatDivide: 4, subBeatMultiply: 25, bpmMultiplier: 1 },
triplet: { beatDivide: 3, subBeatMultiply: 33, bpmMultiplier: 1 }
},
68: {
sixteenth: { beatDivide: 2, subBeatMultiply: 50, bpmMultiplier: 3 }
}
};