Abstract: Improve your accuracy and speed with the guitar fretboard.
Full Description: An interactive table to improve your speed and accuracy on the guitar fretboard. Built with R Shiny and reactable. Guitar sounds from Gleitz MIDI.js soundfonts and the idea for vibrating strings is from Pascal Thormeier's article.
My performance mode
I'm learning guitar with my son and wanted a simple app to learn the fretboard and save progress. There are fretboard learning apps out there but I wanted something on one page with a big play button that I could press and get quizzed immediately or see all the notes without going through multiple configuration screens. Plus I wanted to see if I could do it with Shiny and reactable which is a well documented flexible package.
The data is sourced from you, the venturous guitar learner. As you play games, it is stored in your local storage on your browser for up to 100 games. The limit is there so as not to eat up all your browser storage and slow your system down.
div elements in the middle of each table cell. I discovered they can also be rotated, which is done slightly in the headstock to simulate a real guitar. The other challenge was the circle markers on the fretboard as they overlap vertical table cells. I ended up using two semi-circles stuck together between vertical table cells. To speed up showing fretboard notes, they are pre-rendered with reactable's column definitions and start hidden, only showing when hovered. Vibrating strings is done with css animations and sounds use jQuery via Shiny's
Watch a video demo of the main features on youtube
- 3 modes - learn, play and my performance
- In learn mode, view note names by hovering over the fretboard or letter names.
- View all notes together, sharps or flats
- Detailed app help (press the info i button)
- Choose a game type and range (sharps, flats, naturals) or mix them up
- In play mode answer by clicking on the fretboard or letter names
- When a game ends, see which notes you got right and wrong on the fretboard
- Autosaves up to 100 games
- In my performance mode, view game statistics as a heat map, chart and KPI
The app has a help system accessible by clicking on the i button (next to the big green play button) - built with rintrojs.
There are 3 reactable tables used in the app, marked above in red rectangles.
(The letters section is actually three similar tables close together.)
The app UI is aligned with how the code is split into modules that contain UI components and reactives. Supporting functions are prefixed
ui_. The state of the app at any time is maintained by
state reactive values defined in
app_state.R. Help documentation is contained in
help.R as a data frame.
Supporting folders include
config for configurations including game type and range choices used in the selectize drop downs for game settings. Special interactions and styles including string vibrations and audio are assisted by the
Table Type: interactive-Shiny
Submission Type: Single Table Example
Code: GitHub - vfridkin/fret_table
Languages: Built with R: true. Built with Python: false.
Industries: Music education.
Other packages: reactable