diff options
| -rw-r--r-- | fretboard.mjs | 13 | ||||
| -rw-r--r-- | main.mjs | 10 |
2 files changed, 18 insertions, 5 deletions
diff --git a/fretboard.mjs b/fretboard.mjs index 8a7fe36..9c25ff6 100644 --- a/fretboard.mjs +++ b/fretboard.mjs @@ -1,5 +1,6 @@ // open string notes, starting from the deepest string. const openStrings = ['E', 'A', 'D', 'G', 'B', 'E']; +const stringOctaves = [3, 3, 4, 4, 4, 5]; // convert ‘string1’ ‘fret2’ in ‘form’ to F# export function fretToNote(form, stringName, fretName) { @@ -64,11 +65,11 @@ export default class extends HTMLElement { this.querySelectorAll('.play').forEach(elt => elt.onclick = e => { if (this.isPlaying) { (postEvent(elt, this.stopEvent))(e); - elt.innerText = 'play'; + elt.innerText = '▶️ play'; this.isPlaying = false; } else { (postEvent(elt, this.playEvent))(e); - elt.innerText = 'stop'; + elt.innerText = '⏹️ stop'; this.isPlaying = true; } }); @@ -81,6 +82,12 @@ export default class extends HTMLElement { }); } + get octaves() { + return Array.from(this.querySelectorAll('x-string')).map(elt => { + return Number(elt.getAttribute('octave')); + }); + } + updateSelected(formData) { // this.querySelectorAll('tbody .selected').forEach(elt => { // const string = Array.from(elt.parentNode.classList).filter(x => x.startsWith('string'))[0]; @@ -129,9 +136,11 @@ export default class extends HTMLElement { const item = tmpl.content.cloneNode(true); console.debug(' -- item', item); const tonic = openStrings[i]; + const octave = stringOctaves[i]; item.querySelectorAll('[slot="string"]').forEach(s => { console.debug(' -- setting tonic', tonic, 'on', s); s.setAttribute('tonic', tonic); + s.setAttribute('octave', octave); s.setAttribute('value', tonic); s.setAttribute('frets', frets.toString()); }) @@ -30,9 +30,13 @@ function init() { if (player) { player.stop(); } - player = new Player(e.detail.notes.filter(n => n !== 'x').map(n => { - // smoosh everything into 4 right now - return toCents([a, 4], [Note.fromString(n), 4]); + const played = e.detail.notes.map((n, i) => { + if (n !== 'x') { + return [Note.fromString(n), e.detail.octaves[i]] + } + }).filter(n => n); + player = new Player(played.map(([n, o]) => { + return toCents([a, 4], [n, o]); })); player.start(); }); |