How Can Python Help Navigate the Guitar Fretboard?

End-to-end review of a Guitar Fretboard Trainer App, built with Plotly Dash, Python, html, and css | available Live and on GitHub

Photo by Jeremy Allouche on Unsplash

Motivation

“The guitar is the easiest instrument to play and the hardest to play well” (Andrés Segovia)

Like many “hobbyist guitar players” constantly aspiring to improve, I’ve been focusing on getting to know the guitar fretboard a little better. Recognizing notes on the guitar can help with improvising, applying music theory, remembering songs easily, etc.

I thought about building an app that could help in this process, making it more fun and allowing anybody to train on the fretboard anywhere, at any time.

The app shows a guitar fretboard: some positions get highlighted randomly, and the user needs to guess the right notes.

(The app is optimized to run on a computer. It is not optimized for smaller devices).

In this post, we’ll review the code of the main components of the app:

1. Creating a Guitar with Python object-oriented programming
2. Building the Guitar Fretboard layout
3. Adding audio to the app
4. Combining everything in a Callback
5. Deploying the App
Resources

1. Creating a Guitar with Python object-oriented programming

The app needs to be able to select random positions on the guitar, calculate the notes in each of them, and show feedback on the user’s answers.

To ease this process, we’ll build a guitar using two classes: Note and GuitarString .

• The Note class consists of two attributes and two methods, allowing to get the note value (A, B, C, D, E, F, G, …) and to check if the note is “accidental” (a sharp or a flat note: e.g., A#, Db):

• Next, we implement the GuitarString class. This class assigns notes to fret positions, automatically: starting from a string’s open note (which is an input parameter), the __setFrets__ method calculates all the notes in all positions, given that each fret represents a half-step distance between notes. Additionally, some other methods have been created to access the class attributes and to get feedback (True / False) when the user guesses the note in each position.

• Finally, to have a guitar, we can simply create some GuitarString objects in a dictionary, where the keys represent the id of each string:

With this setup, we can already play to guess notes interacting with the console:

2. Building the Guitar Fretboard layout

Next, we’ll build the fretboard layout on a webpage.

Here’s a possible conceptualization of the guitar layout using some Plotly Dash components:

• each fret can be seen as a “column” (using an html.Div() component), containing some other html.Div() (which can be seen as “rows”) to represent the alternation of strings and wood parts of the guitar neck.
• all frets will be nested inside a bigger html.Div() which represents the whole neck.
• at the center of each string, within each fret, we can highlight a different note.

Let’s see this in action: here’s a basic app that renders the guitar layout. With a few input components, we can adjust the style and the app renders it immediately (link to the live app; link to the Github repo):

In the main app, the guitar is created by a function createGuitar()where fret columns are generated in a loop. Notes are highlighted by html.Div() that goes on top of strings (thanks to the string’s css property: position:relative).

3. Adding audio to the app

Another feature that we can add to the app is audio. Once a new question is fired, the note that the user needs to guess is played. This feature could help in ear-training, but can also be deactivated.

Dash provides a component to play and control audio files: html.Audio(). In this app, this component is used in a “hidden” mode: when a new question is displayed to the user, html.Audio() is created and returned by a callback in an empty html.Col() component. Nothing about html.Audio() is displayed on the webpage (the controls prop is deactivated), but the audio file is played (the autoPlay prop is activated):

4. Combining everything in a Callback

Dash callbacks are used to change the app layout depending on the user’s inputs. In this App, there can be 5 different layout configurations, triggered by button clicks:

• First initialization: the user opens the app, and an empty guitar fretboard is visualized, together with the filters and the play button. The user can change filter configurations or press play, going into the next mode.
• New question mode: the user presses “play” and a new question is displayed, together with the audio (if it wasn’t deactivated).
• New answer mode: the user submits a new answer and the app reacts showing if it’s correct or incorrect. The “next” button is displayed, which allows going back into the “new question mode”.
• Stop mode: the user stops the app and all results are displayed. All user’s answers are stored in a dcc.Store() component, that is used here.
• No updates: in any other case, the app shouldn’t update its layouts.

These modes have been coded into a single callback, which becomes quite long, but it is quite simple in the end. Here’s a pseudo-code to illustrate its logic:

@callback(Output() # Several page components gets updated
          Input()) # Inputs from filters, buttons and dcc.Store
def react():
  # Step 1 > create a guitar and the complete set of questions
  myGuitar, random_positions = notesBuilder() # This is udf (user's defined function) that generates the guitar layout
  # Step 2 > Calculate the app mode
  store_data, app_mode = calculateMode() # This is a udf that, based on button n_clicks, calculates one of the above 5 modes
  # Step 3 > React to the mode
  # ----------- FIRST INIT ----------- #
  if app_mode == 'first call':
    return ... # An empty guitar is returned, together with the play button
  # ----------- NEW QUESTION ----------- #
  elif app_mode == 'new question':
    # Pick a random question from memory
    # Display it on the guitar fretboard
    # Create the html.Audio component
    # Save to memory (both the question and the timestamp)
    return ... # The guitar fretboard is modified, highlighting a note; the question is shown together with new buttons
  # ----------- NEW ANSWER ----------- #
  elif app_mode == 'new answer':
    # The user input is cleaned and verified (correct / incorrect)
    # The right answer is calculated (using above custom classes) and shown on the guitar
    # A dcc.Alert component is generated with a feedback message
    # The elapsed time, together with the correct / incorrect info is saved into dcc.Store
    return ...
  # ----------- STOP (Results review) ----------- #
  elif app_mode == 'stop':
    # Based on dcc.Store data, all right answers are highlighted on the guitar
    # A new dcc.Alert component is generated with the whole results
    # dcc.Store data about questions and answers is erased
    return ...
  # ----------- NO UPDATES ----------- #
  else:
    raise PreventUpdate

5. Deploying the App

This app was deployed using PythonAnywhere for free.

In this post, I presented the steps needed to deploy any (small) Flask application, like this one.

Resources

• Live app on Python Anywhere
• Github repo
• Guitar fretboard renderer: Live app and Github repo
• Want to know more about using Plotly Dash? Check here

Thank you for reading till here !

Want to connect? Please click here
Check out my other posts.

PlainEnglish.io 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer️
• Learn how you can also write for In Plain English️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture