The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Music Scale Note Picker Web Component

TODO: Pull subtitle into page object

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Music Scale Note Picker Web Component

-- html
-- show: above

<note-picker></note-picker>

-- script
-- show

class MusicScaleNotePicker extends HTMLElement {
    constructor() {
        super()
        this.attachShadow({ mode: 'open' })

        this.picker = document.createElement('input')
        this.picker.type = "range"
        this.picker.min = 1
        this.picker.max = MusicScaleNotePicker.notes.length
        this.picker.step = 1
        this.picker.value = 1
        this.picker.addEventListener("input", this.handleChange.bind(this))

        this.noteDisplay = document.createElement("div")
        this.noteDisplay.id = "ind"
        this.noteDisplay.innerText = "asdf"
        this.shadowRoot.append(this.picker)
        this.shadowRoot.append(this.noteDisplay)
    }

    handleChange(event) {
        const noteNum = parseInt(event.target.value, 10)
        this.dataset.note = MusicScaleNotePicker.notes[noteNum - 1].n
        this.dataset.hertz = MusicScaleNotePicker.notes[noteNum - 1].h
        this.noteDisplay.innerText = MusicScaleNotePicker.notes[noteNum - 1].n
    }

    static notes = JSON.parse(`[{"n": "C", "h": 16.35}, {"n": "C#", "h": 17.32}, {"n": "D", "h": 18.35}, {"n": "Eb", "h": 19.45}, {"n": "E", "h": 20.6}, {"n": "F", "h": 21.83}, {"n": "F#", "h": 23.12}, {"n": "G", "h": 24.5}, {"n": "G#", "h": 25.96}, {"n": "A", "h": 27.5}, {"n": "Bb", "h": 29.14}, {"n": "B", "h": 30.87}, {"n": "C", "h": 32.7}, {"n": "C#", "h": 34.65}, {"n": "D", "h": 36.71}, {"n": "Eb", "h": 38.89}, {"n": "E", "h": 41.2}, {"n": "F", "h": 43.65}, {"n": "F#", "h": 46.25}, {"n": "G", "h": 49.0}, {"n": "G#", "h": 51.91}, {"n": "A", "h": 55.0}, {"n": "Bb", "h": 58.27}, {"n": "B", "h": 61.74}, {"n": "C", "h": 65.41}, {"n": "C#", "h": 69.3}, {"n": "D", "h": 73.42}, {"n": "Eb", "h": 77.78}, {"n": "E", "h": 82.41}, {"n": "F", "h": 87.31}, {"n": "F#", "h": 92.5}, {"n": "G", "h": 98.0}, {"n": "G#", "h": 103.83}, {"n": "A", "h": 110.0}, {"n": "Bb", "h": 116.54}, {"n": "B", "h": 123.47}, {"n": "C", "h": 130.81}, {"n": "C#", "h": 138.59}, {"n": "D", "h": 146.83}, {"n": "Eb", "h": 155.56}, {"n": "E", "h": 164.81}, {"n": "F", "h": 174.61}, {"n": "F#", "h": 185.0}, {"n": "G", "h": 196.0}, {"n": "G#", "h": 207.65}, {"n": "A", "h": 220.0}, {"n": "Bb", "h": 233.08}, {"n": "B", "h": 246.94}, {"n": "C", "h": 261.63}, {"n": "C#", "h": 277.18}, {"n": "D", "h": 293.66}, {"n": "Eb", "h": 311.13}, {"n": "E", "h": 329.63}, {"n": "F", "h": 349.23}, {"n": "F#", "h": 369.99}, {"n": "G", "h": 392.0}, {"n": "G#", "h": 415.3}, {"n": "A", "h": 440.0}, {"n": "Bb", "h": 466.16}, {"n": "B", "h": 493.88}, {"n": "C", "h": 523.25}, {"n": "C#", "h": 554.37}, {"n": "D", "h": 587.33}, {"n": "Eb", "h": 622.25}, {"n": "E", "h": 659.25}, {"n": "F", "h": 698.46}, {"n": "F#", "h": 739.99}, {"n": "G", "h": 783.99}, {"n": "G#", "h": 830.61}, {"n": "A", "h": 880.0}, {"n": "Bb", "h": 932.33}, {"n": "B", "h": 987.77}, {"n": "C", "h": 1046.5}, {"n": "C#", "h": 1108.73}, {"n": "D", "h": 1174.66}, {"n": "Eb", "h": 1244.51}, {"n": "E", "h": 1318.51}, {"n": "F", "h": 1396.91}, {"n": "F#", "h": 1479.98}, {"n": "G", "h": 1567.98}, {"n": "G#", "h": 1661.22}, {"n": "A", "h": 1760.0}, {"n": "Bb", "h": 1864.66}, {"n": "B", "h": 1975.53}, {"n": "C", "h": 2093.0}, {"n": "C#", "h": 2217.46}, {"n": "D", "h": 2349.32}, {"n": "Eb", "h": 2489.02}, {"n": "E", "h": 2637.02}, {"n": "F", "h": 2793.83}, {"n": "F#", "h": 2959.96}, {"n": "G", "h": 3135.96}, {"n": "G#", "h": 3322.44}, {"n": "A", "h": 3520.0}, {"n": "Bb", "h": 3729.31}, {"n": "B", "h": 3951.07}, {"n": "C", "h": 4186.01}, {"n": "C#", "h": 4434.92}, {"n": "D", "h": 4698.63}, {"n": "Eb", "h": 4978.03}, {"n": "E", "h": 5274.04}, {"n": "F", "h": 5587.65}, {"n": "F#", "h": 5919.91}, {"n": "G", "h": 6271.93}, {"n": "G#", "h": 6644.88}, {"n": "A", "h": 7040.0}, {"n": "Bb", "h": 7458.62}, {"n": "B", "h": 7902.13}]`)
}

customElements.define('note-picker', MusicScaleNotePicker)





-- ref
-- url: https://pages.mtu.edu/~suits/notefreqs.html

-- categories
-- HTML 
-- JavaScript 
-- WebDev 

-- metadata
-- date: 2023-08-31 20:19:01
-- id: 2ulwauym
-- site: aws
-- type: post
-- status: draft