scribbletune / johann

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

SCRIBBLETUNE

Use simple JavaScript Strings and Arrays to generate rhythms and musical patterns. Directly use the names of scales or chords in your code to get arrays which you can mash up using Array methods in ways you hadn't imagined before! Create clips of musical ideas and export MIDI files which you can import in Ableton Live, Reason, GarageBand or any music creation software that accepts MIDI files.

Install

npm install scribbletune

Use it to create a MIDI clip by running a JS file from your terminal using node.js

const scribble = require('scribbletune');
const clip = scribble.clip({
    notes: scribble.scale('C4 major'),
    pattern: 'x'.repeat(7) + '_'
});

scribble.midi(clip, 'c-major.mid');

You can use Scribbletune even in the browser with Tone.js!. There are a couple of ways to do this. A quick and dirty way is to make sure to pull in Tone.js followed by the latest browser version of Scribbletune.

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/<LATEST-VERSION-FROM-CDNJS>/Tone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scribbletune/<LATEST-VERSION-FROM-CDNJS>/scribbletune.js"></script>

This will expose a global object called scribble which you can directly use to run the methods from Scribbletune in conjunction with Tone.js

The recommended way for the browser, however, is to import it like this

const scribble = require('scribbletune/browser');

This will provide the same API but augment it a bit to support browser based functionality.

Similarly, you can use the Scribbletune API for Max for Live development by doing

const scribble = require('scribbletune/max');

Just like the browser version this too will enable the same API but with some added bells and whistles for Max for Live.

Visit scribbletune.com for documentation, tutorials and examples! Listen to music generated with Scribbletune on Soundcloud.

johann's Issues

Add to Home Screen

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

consider downshift for the dropdowns

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

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

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 autotrack

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

Update to Scribbletune 1.x

Move scale/chord selector one level up

add tests (cypress maybe?)

add more tunings

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

thanks

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

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

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

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}
]);

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

Move to it s own domain

After moving add a meta tag to current location to redirect

Make app responsive

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

left handed fretboard

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

thanks

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

Add styles for print media

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

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

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}
]);

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 }
])

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.

Guitar plotter notes should be on the string

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

Add event tracking

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