Soundboard
Let me first prefix this with I have no knowledge of music, harmonies, scales or rhythm. This is just to explore the different sounds that could be produced by the Web Aduio API on the fly instead of bundeling MP3s.
Check out the implementation at github.com/shadovo/svelper/.../soundboard.svelte
Drums
Notes (sine)
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | |
|---|---|---|---|---|---|---|---|---|---|
| C | |||||||||
| C# | |||||||||
| Db | |||||||||
| D | |||||||||
| D# | |||||||||
| Eb | |||||||||
| E | |||||||||
| F | |||||||||
| F# | |||||||||
| Gb | |||||||||
| G | |||||||||
| G# | |||||||||
| Ab | |||||||||
| A | |||||||||
| A# | |||||||||
| Bb | |||||||||
| B |
Bass (triangle)
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | |
|---|---|---|---|---|---|---|---|---|---|
| C | |||||||||
| C# | |||||||||
| Db | |||||||||
| D | |||||||||
| D# | |||||||||
| Eb | |||||||||
| E | |||||||||
| F | |||||||||
| F# | |||||||||
| Gb | |||||||||
| G | |||||||||
| G# | |||||||||
| Ab | |||||||||
| A | |||||||||
| A# | |||||||||
| Bb | |||||||||
| B |
Melodies
I wrote a function that can take a list of instructions on which instruments to play for each "beat".
Check out the implementation at github.com/shadovo/svelper/.../soundboard/+page.svelte
// each row is [notes, bass, hihat, kick, snare]
const melody = [
[['C4', 'E4', 'G4', 'B4'], [['D2', 3]], true, true, false],
[['D4', 'F4', 'A4', 'C5'], [], true, false, false],
[['E4', 'G4', 'B4', 'D5'], [['B1', 3]], true, false, true],
[['F4', 'A4', 'C5', 'E5'], [], true, false, false],
[['G4', 'B4', 'D5', 'F5'], [['F2', 3]], true, true, false],
[['A4', 'C5', 'E5', 'G5'], [], true, false, false],
[['B4', 'D5', 'F5', 'A5'], [], true, false, true],
[['C5', 'E5', 'G5', 'B5'], [], true, false, false],
];
More complex melody
This is a melody generated by ChatGPT given the data format.
// each row is [notes, bass, hihat, kick, snare]
const melody = [
[[], [], false, false, true],
[[], [], false, false, false],
[[], [], false, false, true],
[[], [], false, false, false],
[[], [], false, false, true],
[[], [], false, false, false],
[[], [], false, false, true],
[[], [], false, false, false],
[['G3', 'B3', 'D4'], [['G2', 6]], true, true, false],
[['E4'], [], true, false, false],
[['A3', 'C4', 'E4'], [['A2', 6]], true, false, true],
[['G4', 'B4'], [], true, false, false],
[['C4', 'E4', 'F4'], [['C2', 6]], true, true, false],
[['D4'], [], true, false, false],
[['C3', 'D3', 'A4'], [['C2', 6]], true, false, true],
[['B5', 'A6'], [], true, false, false],
[['F3', 'A3', 'C4'], [['F2', 6]], true, true, false],
[['D4'], [], true, false, false],
[['G3', 'B3', 'D4'], [['G2', 6]], true, false, true],
[['C4', 'E4'], [], true, false, false],
[['A3', 'C4', 'E4'], [['A2', 6]], true, true, false],
[['D4'], [], true, false, false],
[['C4', 'E4', 'G4'], [['C2', 6]], true, false, true],
[['A4', 'C5'], [], true, false, false],
[['D4', 'F4', 'G4'], [['D2', 6]], true, true, false],
[['A4'], [], true, false, false],
[['D3', 'F3', 'A3'], [['D2', 6]], true, false, true],
[['C4', 'E4', 'G4'], [], true, false, false],
[['F3', 'A3', 'C4'], [['F2', 6]], true, true, false],
[['G3', 'B3', 'D4'], [], true, false, false],
[['D4', 'F4', 'A4'], [['D2', 6]], true, false, true],
[['C5'], [], true, false, false],
[['E3', 'G3', 'B3'], [['E2', 6]], true, true, false],
[['C4', 'E4', 'G4'], [], true, false, false],
[['F3', 'A3', 'C4'], [['F2', 6]], true, false, true],
[['G3', 'B3', 'D4'], [], true, false, false],
[['C4', 'E4', 'G4'], [['C2', 6]], true, true, false],
[['A4', 'C5'], [], true, false, false],
[['D4', 'F4', 'G4'], [['D2', 6]], true, false, true],
[['A4'], [], true, false, false],
];