We Are Online!

Finally it’s done.  The new alphaTab website is online.

Evaluating Fantom

Hi Readers.

As you might know: alphaTab is written in Haxe which is a multiplatform language, which means it’s sources can be compiled to several other languages like JavaScript or ActionScript. But there are some points on the alphaTab roadmap which can’t be done with Haxe: Targeting C# and Java. Since years the community is waiting for Haxe to support those platforms but none of them were implemented till now. Therefore I started to search for a solution. I started several subprojects like an own Haxe Target, an own compiler,… but I didn’t succeed. So I started to search for another solution and found Fantom. Fantom matches exactly the requirements of alphaTab. It supports the targeting of JavaScript, Java and C#.  Additionally it has some sets of libraries which are currently implemented by my own, i.E. canvas drawing and GUI creation.

I just started to setup my development environment and will evaluate if Fantom produces exactly the code I want to. So stay tuned for updates.

Update

To bad: Fantom only produces it’s own Intermediate Bytecode which can be run using the fan runtime. The fan runtime can use a Java VM or the CLR to run it’s code.

The good thing: Fantom provides a converter for Java and .net. The next thing is to find out how to produce JavaScript Code.

alphaTab 0.2 RC1 out now!

Hi visitors!

I’m glad to introduce the first Release Candidate of alphaTab.

You can download alphaTab from the Google Code Repository till the alphaTab website is online. Head over and download your free copy now:

Our new live demo shows you all features of alphaTab:

To report bugs and submit ideas head over to our GetSatisfaction page:

Greetings
Daniel

alphaTab ready for release! (nearly)

Hi visitors.

It is a long time since I’ve written the last news about alphaTab and I’m glad to say alphaTab is ready for release!

alphaTex

The built in notation language of alphaTab has now the name alphaTex. (in style of LaTex). The language has now a rich set of features which allows to write notes as you need to:

• metadata (songtitle, tempo,..)
• notes (single, chords,..)
• durations (per note, chord, range)
• beat effects (vibrato, tremolobar,…)
• note effects (grace notes, bends,…)
• …

new jQuery plugin

I’ve completely rewritten the jQuery plugin to clean up code and provide a better API.

new midi exchange format

The midi exchange format used to send the midi messages from javascript to the java player has been improved to use less memory.

Internet Explorer support

It was a hard work to get the IE into the supported Browsers list. Using ExplorerCanvas and a custom built flash movie we can provide the same features to the IE as to the other browsers. The mentioned flash movie provides an API which allows the loading of binary files in the IE.

Website and Documentation

This was quite the most work in the last month. I had to write a lot of documentation and samples which allows everyone to use and customize alphaTab the way you like. And this is the part where the “nearly finished” comes along. As the heavy redesigning of the alphaTex language and it’s rich features no full documentation is available. I also have some troubles uploading the website to the new domain.

New Live Demo Online

Check out the new live demo and samples to see how the new alphaTab looks and how it works!

Greetings Daniel

alphaTab one step closer to release 0.2

Hi Visitors.
On this update I can present you a major change. But first of all I want to talk about the new project website. I’ve implemented the wordpress theme but haven’t prepared the content yet, this is why the website isn’t online yet. I registered the google code repository and added some information about the project: http://code.google.com/p/alphatab/ the next step here is to sync the svn repository with the old one to adapt all commits.

So let’s talk about some code. As the project was renamed, also a lot of adjustments in code had to be made. The namespace is now net.alphatab (formerly net.coderline.jsgs) and also the jQuery plugin is renamed.

And now: the major change / new feature that most of you will be interessted about:

alphaTab gets it’s own language!

Till now, alphaTab only supported loading tabs via GuitarPro files. This isn’t quite flexible as you want to embedd music notation into your blog, website etc. Therefore I created an own text-base language which allows you to write tabs and music notation right within your browser and render it using alphaTab! To use this feature simply run the jQuery plugin and place the tablature code in your tab:

js:
$('div.alphaTab').alphaTab();
html
<div class="alphaTab">
.
0.6.2 1.5.4 3.4.4 | 5.3.8 5.3.8 5.3.8 5.3.8 r.2
</div>

Using the code shown above, the plugin will take the code within the div and will render this tablature:

The language currently supports all important features to write simple music notation. The next step is to support beat and note effects. If this piece of code is implemented, you can create rich music notation and tablature for your website.

You can enable a real time editor if you call the jQuery Plugin including the parameter enabled: true.

$('div.alphaTab').alphaTab({enabled:true});

Check it out on the development showcase and be the first who learns the alphaTab language:

alphaTab – Html5 music notation and tablature

αlphαTab – A HTML5 Music Notation and Tablature Renderer

Hi Visitors.

I’m glad to announce the rename of JsGuitarSharp to αlphαTab. I decided to rename the project to a more recognizable name. I also registered a domain for the project and made the design.

αlphαTab.net

Greets Daniel

JsGs – New Development Build Online

Hi Visitors.

I just uploaded a new build of the upcoming 0.2 release of JsGuitarSharp. Head over to http://dev.coderline.net/jsgs to check out the new version of our html5 notation renderer.I tried to fully support Microsofts Internet Explorer in this version but as the IE doesn’t support this line…

xhr.overrideMimeType(“text/plain; charset=x-user-defined”);

… I’m not able to read parse the binary guitar pro files. The rendering should work using ExCanvas and manually create a song. As soon we support MusicXML and other text based file formats the Internet Explorer should also be able to display and play songs.

Another minor change is styling via css. I removed the background painting which allows styling the canvas tag (background, border etc.) via simply css styles.

Hint: Check out the Effects Sample to see what effect annotations are supported.

Greets Daniel.

JsGs – Tuplets, Grace Notes, PalmMute/LetRing

Another news regarding JsGuitarSharp our HTML5 Notation renderer comes along.

Copyright Notice

I added a small footer containing a small copyright notice:

True word: It’s copied from VexFlow/VexTab but I plan to customize the display to an individual one. 

New Duration Sizes

I compared the current duration sizes to GuitarPro5 and concluded that bigger sizes look better and fixes some problems displaying effects (overlapping).

Here a comparison:

Old:

New:

Tuplets

I finally created a new renderer for Tuplets. Up to now tuplets got rendered as number above each single tablature note.

That’s quite uncomfortable for reading and it’s not the right way for displaying tuplets. In the current revision they are rendered as grouped bars with a single number in center:

Maybe you recognize the copyright notice below the tablature. Also a minor change

Grace Notes

A few days ago I found out that I haven’t implemented all required musical symbols. One of them are grace notes. Here another comparison:

Old:

New:

PalmMute / LetRing

I disliked the rendering of PalmMute and LetRing so I changed this renderer too. Too bad: canvas doesn’t support dashed line types and therefore the horizontal line is rendered solid. Just a minor change.

Vibrato Types

Another minor change are the different vibrato types. In the current revision I differ Beat Vibratos and Note Vibratos as GuitarPro does it:

So that’s it. Stay tuned for further updates

Greetings Daniel

JsGs – Guitar Pro 6 File Reading

Hey guys.

I’m happy to let you know that we are one step further to GP6 file reading. Thanks to Bassklampfe who succeded in extracting the files from the file system within a GPX file.  The reading itself is currently very inefficient but as we don’t know how Arobas did this job, I think we can’t do it much better. The biggest problem with reading is that they are writing and reading single bits, not only full bytes in their algorithms. Therefore a byte we want to read starts at the 4th bit of the first byte, and ends in the second one. This is also why we can’t find any plain texts when we open a file in a text-editor.

Okay, now some facts about the new gpx files. As already mentioned: GPX files contain multiple other files. (like a zip archive or the thumbs.db).

This is the description of  Vincent (bSr43) who posted some details about the file format:

I'm the one who created GPX binary layout. GPX are compressed files corresponding to a container filesystem,
with at least one file inside named score.gpif.

Compression is a very simple home made dynamic dictionnary compression  scheme. File starts with
"BCFZ" for compressed files and "BCFS" for uncompressed one.

For compression, simply consider file as a binary stream. BCFZ singature  is followed by the decompressed length on
32 bits. Then you'll find a succession of compressed and uncompressed chunks. As far as I remember, a  0 means
"raw content follows", and 1 means "compressed content follow". For uncompressed chunks (starting with 0),
you'll find two bits giving  you length in bytes of the following raw content. For compressed, four bits gives you
an integer P, then two words of P bits follow named   OFFSET and LENGTH, so content is previously uncompressed
content found OFFSET bytes later.
(Source: http://tuxguitar.herac.com.ar/forum/3/1657/guitar-pro-6-gpx-files/ , 07.07.2010)

Our sources are based on this little description. Till we get more information about this file format, we will keep this dirty algorithm. The next step is to analyze the XML file which contains the song information and create a parser to fill the current song model using this file.

- Daniel

JsGs – New Features

Hi Visitors.

I’m glad to present you a lot of new features in JsGuitarSharp:

Real Time Playback including Measure Highlighting

I created a Java Applet which implements a Midi Sequencer. On my last post I already mentioned this feature and described the format description of the passed trough midi messages. But now the performance of this feature has been improved and now songs play without many delays. The proudest thing I want to show you, is the realtime measure highlighting. During the playback the measure which is played, is highlighted:

At the beginning I had a lot of performance problems because the tablature redrawing is a heavy operation. So my question was: How can I prevent this heavy drawing operation. And finally the answer came into my mind: Simply use a div. I created a div which gets positioned right above the canvas and gets moved as soon as the callback of the Java player signals the changes.

JQuery Plugin

The second big deal is the JQuery plugin i created. Using this plugin the website embedding is a lot easier than before. You had to create a new Tablature instance, pass trough the canvas tag, create all the control stuff around…

All those steps are now automized via JQuery. Now you simply have to follow 3 steps to embedd a full featured Tablature to your website:

1. Create a new div container which should contain the tablature. i.E.

<div id="TablatureContainer"></div>

2. Call the plugin using wished parameters. This call returns a api containing some accessors

	var jsgs = $('#TablatureContainer').jsgs({
		loadCallback : songLoaded,
		errorCallback: function(err) {
			alert('Error: ' + err);
		},
		player:true,
		playerTickCallback: "onTickChanged"
	})[0];

Supported Parameters

• file - this file gets loaded initially (optional)
  
• loadCallback - a callback function called as soon as a song was loaded. the first parameter is the song. (optional)
  
• errorCallback - a callback function called as soon as an error occurs. the first parameter is the error string (optional)
  
• error - a string indicating the displayed text if no track is loaded (optional) default: “Load a file to display the tablature”
  
• track - the index of the song to display (optional) default: 0
  
• factory - the factory to use. usually you should not change this property (optional) default: a GsSongFactoryImpl instance
  
• zoom - the zoom level as floating point number  (optional) default: 1.1
• width: the initial width of the tablature (optional) default: 600
• height: the initial height of the tablature (optional) default: 200
• language: a array containing the labels for player control buttons (optional): default: {play:”Play”, pause:”Pause”, stop:”Stop”}
• player: whether the player functionality should be available (optional) default: false
• caret: whether a caret should indicate the current playing position. only available in if player option is true. (optional) default:true
• autoscroll: whether the browser scrolls automatically to first measure of the line during playing (optional) default:true
• playerPath: the filepath to the jsgs.jar file containing the player applet (optional) default: ‘jsgs.jar’
• playerTickCallback: a string indicating the function name which is called if the miditick of the player has changed (called via Java applet; optional)
  

3. Use the api object to load files and change the displayed track.

The provided api object contains following interesting properties / methods:

• .tablature - reference to the net.coderline.jsgs.tablature.Tablature instance
• .loadFile(url) – loads the specified file
• .player – reference to the player applet
• .playerControls – reference to the div containing the player controls as the play, pause and stop button
• .updateCaret(tick) – moves the caret to the measure at the specified midi tick. (can be used in playerTickCallback optio

jsgs.loadFile('samples/test.gp5');

Live Demo

The current development build can be found on the development showcase: http://dev.coderline.net/jsgs/

Stay tuned for further updates.

Greetings
- Daniel