my recent reads..

Atomic Accidents: A History of Nuclear Meltdowns and Disasters; From the Ozark Mountains to Fukushima
Power Sources and Supplies: World Class Designs
Red Storm Rising
Locked On
Analog Circuits Cookbook
The Teeth Of The Tiger
Sharpe's Gold
Without Remorse
Practical Oscillator Handbook
Red Rabbit
Showing posts with label Music. Show all posts
Showing posts with label Music. Show all posts

Sunday, August 30, 2009

jTab 1.1: Guitar tab for the web gets an update and a mailing list

I announced jTab back in July, and there have been some nice improvements over the past month which I just tagged as a "1.1" release.

jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web. Automatically. It is open source (available on github).

I've also established a mailing list for jTab. All are welcome to join in to discuss internal development issues, usage, and ideas for enhancement.


Some of the key new features:

  1. All chords can be represented in any position on the fretboard e.g. Cm7 Cm7:3 Cm7:6

  2. Now allows shorthand tab entry of 6-string chords e.g. X02220 (A chord at nut), 8.10.10.9.8.8 (C chord at the 8th fret)

  3. jTab diagrams now inherit foreground and background color of the enclosing HTML element

  4. When entering single-string tab, can reference strings by number (1-6) or by note in standard tuning (EAGDBe)

  5. The chord library with fingerings has been extended to cover pretty much all common - and uncommon - chord variants (m, 6, m6, 69, 7, m7, maj7, 7b5, 7#5, m7b5, 7b9, 9, m9, maj9, add9, 13, sus2, sus4, dim, dim7, aug).

  6. It has been integrated with TiddlyWiki: jTabTwiki combines the guitar chord and tab notation power of jTab with the very popular TiddlyWiki single-file wiki software. Together, they allow you to instantly setup a personal guitar tab wiki/notebook. No kidding. And it's free.

Sunday, July 12, 2009

ChordMaster 2000 - the sexy way to learn guitar chords

So this weekend I've dressed up jTab as a little web application to help you learn chord fingerings for guitar...

Introducing the ChordMaster 2000 ;-)




OK, so maybe I sexed up the design and UI a little too much for such a simple task, but it was fun to see how far I could go with javascript and SVG (and no flash or silverlight).

It was also a proof point for jTab - the javascript library I released last week that renders arbitrary guitar chord and tab using SVG. Happily, it worked fine without a tweak - just some extension methods that are specific to the ChordMaster application (like getting an array of all chords that are defined as "intermediate" level).

PS: big thanks to @jasonong who's jumped in and already made some great contributions to the jTab project on github -- It's amazing to see github rock as a "social coding" platform - create a public project one day, have changes to merge back the next. Trivial to do with git, and the great visualisation of the project revision/branch history makes merging so easy to understand.

Sunday, July 05, 2009

jTab - Guitar Chord and Tab Notation for the Web

Guitar tab (notation) is all over the internet, but it is usually in either a fixed/non-interactive form, or painstaking ASCII format.

I've always wanted a better way, and two things I've looked at recently inspired me to think it might be possible: Dmitry Baranovskiy's fantastic work on the Raphaël SVG library, and Alex Gorbatchev's syntaxhighlighter.

So now I can introduce the result of my latest weekend project:

jTab - newly minted and ready to rock and roll!

See the project home page at http://jtab.tardate.com for more examples and information about how you can use it too. jTab is open source, with the master source code repository on github .

What does it do?

jTab is a javascript-based library that allows you to easily render arbitrary guitar chord and tabulature (tab) notation on the web. It handles implicit and automatic rendering of any page elements given the special class name 'jtab'. It can also be scripted for more sophisticated or interactive effects.

Bottom line: jTab turns this..

<div class="jtab">Bm $3 4 4h5p3h4 5 $2 3 5 7 7h8p7 5/7 | A $4 7 9 $3 7 6 $5 9 $4 7h9 7 $5 9\7 5/7 | </div>

..into this:


Grab it, use it, help me improve it, or just let me what you think...