scribbletune/johann

Use scribbletune to generate guitar, piano and computer keyboard scales/chords/notes practice charts.

Johann

Generate chords & scales to practice on your guitar, piano or computer keyboard! johann.scribbletune.com

---

This project is aimed at helping personal guitar, musical keyboard or computer keyboard music practice. It originates from a personal requirement for being able to put together a chart of notes to practice. This could be for a scale/mode or a chord across the instrument. Basically it helps you focus on the notes you wanna play and practice. For instance on a musical keyboard, you may want to just highlight the C Minor scale so that you can play over it. This little app will let you select the required root note and the scale to generate this:

The same can be done for a triad. You can generate a sheet with just the notes of the C Minor chord to practice it's notes across the fretboard (or in this case the musical keyboard):

The green dot is the root note and the blue dot is a note from the selected scale or chord.

The same can be done for guitars...

and computer keyboards too!

Demo: https://scribbletune.github.io/johann/#/

Develop

Run npm i Begin dev with npm run dev Load http://localhost:8081 in your browser

Build with npm run build

johann's Issues

show octave on note (guitar & piano)

Description
better to show octave on note useful when play in choir
e.g. in standard choir usually use SATB (Sopran Alto Tenor Bass) which every vocal characteristic (male/female) has it's own range (base on octave)

Implementation
perhaps use button to show octave info for show or hidden the info (recommended because not every musicians care about octave can hide it, but for the detail musicians that must play within choir can show the octave)
or
simply put octave info without option to show or hide octave info

Examples
which fretboard must be press to play melody with tenor vocal on major third tuning

ref on piano
https://en.wikipedia.org/wiki/Tenor

thanks

Move scale/chord selector one level up

Create a About link in the footer to accomodate meta info instead of putting it all in the footer

The link should open a modal like the way it s in Desktop software when you select About XYZ

Logo Design Proposal

Good day @walmik I am a graphics designer and open source contributor. I want to contribute to your good project by proposing a logo design for the project which i will be doing for free as a gift. If you will give me permission i will start as soon as possible. Thanks and best regards!

ZW

Add autotrack

• Add autotrack https://github.com/googleanalytics/autotrack
• List down events and categories to track
• Update GA to use autotrack on identified events

grouping scale and it's mode

seems https://scribbletune.github.io/johann is sort the name of scale ascending better to grouping the scale and it's mode
ref
https://en.wikipedia.org/wiki/Mode_(music)#Other_types

thanks

Update to Scribbletune 1.x

Add support for Reaktor's virtual keyboard

Reaktor's virtual keyboard has 2 octaves spanning all 3 rows of the computer keyboard (with no way to go down in octave - you can only go up by pressing 1). Add a support for the full range of the keyboard.

Maj7 and 7th chords in general do not show the 4th note in any of the views

tuning sequence is not standard

Tuning : Regular (should be name 'Standard', because regular tuning, contains major third, augmented fourth, etc)
shown : EBGDAE
should be EADGBE from thickest to thinnest

Tunning : Drop D
shown : EBGDAD
should be DADGBE from thickest to thinnest

Tuning : Double Drop D
shown : DADGBD (this one right)

ref
https://en.wikipedia.org/wiki/Guitar_tunings#Standard_and_alternatives

thanks

dev server port on README.md

dev server port on README.md should be 8080 not 8081
if want to provide detail steps for newbie (dev) :

git clone https://github.com/scribbletune/johann
cd johann
npm install
npm run dev
open http://localhost:8080

Add styles for print media

Currently printing a sheet ends up in non filled notes and has UI elements that may not be required

Make app responsive

consider downshift for the dropdowns

https://blog.kentcdodds.com/introducing-downshift-for-react-b1de3fca0817

lost string when add tuning with # (sharp)

api.ts

export const getTuningsForGuitar = () => ([
	{label: 'Regular', 'display': 'EBGDAE', strings: ['E4', 'B3', 'G3', 'D3', 'A2', 'E2'], tuningIdx: 0, name: 0},
	{label: 'Dropped D', 'display': 'EBGDAD', strings: ['E4', 'B3', 'G3', 'D3', 'A2', 'D2'], tuningIdx: 1, name: 1},
	{label: 'Double dropped D', display: 'DADGBD', strings: ['D4', 'A3', 'D3', 'G3', 'B2', 'D2'], tuningIdx: 2, name: 2},
	{label: 'Drop C', 'display': 'DAFCGC', strings: ['D4', 'A3', 'F3', 'C3', 'G2', 'C2'], tuningIdx: 3, name: 3},
	{label: 'Open G', 'display': 'DGDGBD', strings: ['D4', 'G3', 'D3', 'G3', 'B2', 'D2'], tuningIdx: 4, name: 4},
	{label: 'Major Third', 'display': 'ECG#ECG#', strings: ['E4', 'C4', 'G#3', 'E3', 'C3', 'G#2'], tuningIdx: 5, name: 5}
]);

Guitar plotter notes should be on the string

Currently the notes are in between strings which feels weird while using a chart.

left handed fretboard

nice to have 'Left handed fretboard' feature
the idea same like flip fretboard vertically, but this one flip fretboard horizontally

thanks

Add to Home Screen

https://developers.google.com/web/fundamentals/web-app-manifest/
https://developers.google.com/web/fundamentals/app-install-banners/

combined instruments

nice to have feature to combine instruments (guitar, bass, piano, etc)
useful when using with others musicians using smart tv (big screen)

thanks

add tests (cypress maybe?)

Add event tracking

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

add tuning fretboard add more fret on nut guitar

api.ts

export const getTuningsForGuitar = () => ([
	{label: 'Regular', 'display': 'EBGDAE', strings: ['E4', 'B3', 'G3', 'D3', 'A2', 'E2'], tuningIdx: 0, name: 0},
	{label: 'Dropped D', 'display': 'EBGDAD', strings: ['E4', 'B3', 'G3', 'D3', 'A2', 'D2'], tuningIdx: 1, name: 1},
	{label: 'Double dropped D', display: 'DADGBD', strings: ['D4', 'A3', 'D3', 'G3', 'B2', 'D2'], tuningIdx: 2, name: 2},
	{label: 'Drop C', 'display': 'DAFCGC', strings: ['D4', 'A3', 'F3', 'C3', 'G2', 'C2'], tuningIdx: 3, name: 3},
	{label: 'Open G', 'display': 'DGDGBD', strings: ['D4', 'G3', 'D3', 'G3', 'B2', 'D2'], tuningIdx: 4, name: 4},
	{label: 'All Fourths', 'display': 'FCGDAE', strings: ['F4', 'C4', 'G3', 'D3', 'A2', 'E2'], tuningIdx: 5, name: 5},
	{label: 'Major Third', 'display': 'ECAbECAb', strings: ['E4', 'C4', 'Ab3', 'E3', 'C3', 'Ab2'], tuningIdx: 6, name: 6}
]);

fretboard note labels option

better to have fretboard note labels option for showing :

• note e.g. A, A#, B, etc
• interval e.g. R, m2, M2, etc
• degree e.g. 1, b2, 2, etc

ref
https://en.wikipedia.org/wiki/Interval_(music)#Main_intervals
https://en.wikipedia.org/wiki/List_of_musical_scales_and_modes

Move to it s own domain

After moving add a meta tag to current location to redirect

add more tunings

nice to have more tunings
ref
https://en.wikipedia.org/wiki/List_of_guitar_tunings

thanks

no lowest note when add 7th strings guitar and fretboard marker is not on place

api.ts

export const getTuningsFor7thStringsGuitar = () => ([
	{label: 'Standard', 'display': 'EBGDAEB', strings: ['E4', 'B3', 'G3', 'D3', 'A2', 'E2', 'B1'], tuningIdx: 0, name: 0}
]);

export const getStringInstruments = () => ([
	{ label: 'Guitar', strings: 6, frets: 24, getTunings: getTuningsForGuitar, instrumentIdx: 0, name: 0 },
	{ label: 'Ukulele', strings: 4, frets: 15, getTunings: getTuningsForUkulele, instrumentIdx: 1, name: 1 },
	{ label: 'Guitar 7th Strings', strings: 7, frets: 24, getTunings: getTuningsFor7thStringsGuitar, instrumentIdx: 2, name: 2 }
])