Abcweb

You can either start abcweb from http://wim.vree.org/js/abcweb.html or from a local copy of this file on your computer.
Abcweb also supports loading and saving on dropbox, but only when you start from the website. A local copy will not work with dropbox and only load/save files locally. How to use abcweb on a computer without internet connection is explained at the end of this page.

Speed

Two buttons to the right of the media player change the play back speed. The button called plus increases and the button called min decreases the speed. Normal speed is 1.0. Each button click changes this factor by 0.1. The speed factor can range between 0.5 and 2.0. Synchronization (explained below) works at all speeds and can be done more precisely with lower speed settings.

Looping

The loop checkbox is only visible when the line cursor mode is selected. In loop mode the first two clicks in the score set the left and right edge of the looping range. Each edge is marked with a bold red character: '<' for the left side and '>' for the right side. When clicking again in the score the loop marker closest to the click location is repositioned.
When both range markers are placed, play back will continuously loop between these points. The loop range can still be adjusted while playing (by clicking in the score near one of the markers). The loop mode is switched off by clearing the loop chekcbox. Both range markers will be cleared.

Synchronization

To synchronize a live performance to the score you have to mark the enable sync checkbox. A special area becomes visible which shows some information related to synchronization. You can then follw two methods, while you can switch between both methods at any time. The first method is probably the easiest but not the most accurate. Basically you turn on play back and click in a measure as soon as you hear the first beat of that measure.
- clicking while playing
By clicking in a measure you synchronize the *first* beat of that measure to the audio. You do not need to click in every measure, because, as soon as you click, the program calculates the current tempo and assumes the music keeps playing with that tempo. So you only need to click in a measure when the deviation between the score cursor and the audio becomes too large. After a click in the score, playback jumps one measure backwards for auditing how well the entry of that measure became synchronized. You can disable this backward jump by unchecking the "jump" checkbox. Clicking in the first measure synchronizes the first beat (of the music) to (the first note) in the media file. This sets the, so called, offset of the media file. Do not forget to look at the measure duration and offset numbers in the top right hand corner of the display. You can also adjust these numbers (more precisely) using the keyboard (e.g. while the music is paused).
- using keys while paused
Although you can synchronize playback by clicking in a measure at the right time this is not the most precise (nor the easiest) way to achieve synchronization. Way better is to use the keyboard short cuts. Proceed as follows:
  1. Make sure your score has at least one tempo marking (at the beginning) with approximately the right tempo of the live performance. You will then start out with at least an approximately synchronized score.
  2. Stop play back (p). Switch on the line cursor (l).
    Go back to the first measure ([) and look at the offset time (upper right hand corner, it will be zero in the beginning). Use the keys control-. and control-, to increase or decrease this offset time by 0.1 sec per keystroke. Adjust the offset until the music starts at the same time as the line cursor starts moving. The offset can assume (large) negative values when the music starts late in the media file.
  3. Frequently stop playback (p), navigate a couple of measures backwards ([), and restart playback (p) to judge synchronization. Using the line cursor is probably better for this purpose than measure shading.
  4. Go to the first measure (with play back halted!) where you find that the cursor deviates too much from the music. Use the keys . or , to increase or decrease the measure duration. When the cursor is too late in the measure you have to decrease the duration. You may also want to decrease the measure before the one where you find the deviation too much. When the cursor is too far ahead relative to the music (too fast) you should increase the duration of the measure.
  5. When all measures are synchronized you can save the results (w or save button) to a preload file. The preload file can have any name.

Saving and using a preload file

abcweb can preload score data, media file, synchronization data and several settings from a special javascript file. Such a "preload file" is made by pressing the save button in abcweb (visible when the synchronisation option checked).
To use a preload file you can either load it like a score file with the score file button or you can add the name of the preload file as a parameter in the URL that starts abcweb.
For example, when you use a webserver:
    http://your.domain/abcweb.html?preload_file.js
or when the preload is on dropbox:
    http://wim.vree.org/js/abcweb.html?https://www.dropbox.com/s/z5swu2kum6vorxv/preload_file.js
or when opening abcweb as a local file:
    file:///path/to/abcweb.html?preload_file.js
The latter example assumes that the preload file is in the same directory as abcweb.html. When it is in another location, the relative path to the preload file should be given as well. As an example, suppose the following directory layout:
    /root
    /score/abcweb.html
          /media/example.mp3
          /preload/example.js
Then abcweb.html can be opened in the browser using the following (local file) URL:
    file:///score/abcweb.html?../preload/example.js
The preload file is a regular javascript file. It only contains a couple of assignments. The first assignment sets the media file to load. When example.js is freshly saved using abcweb it will look as follows:
    media_file = "example.mp3";
Note that only a file name is specified and no path. Due to security restrictions in the browser, abcweb cannot save the correct path. This means that you have to add the path manually into example.js. With the example directory tree from above, the first assignment should read:
    media_file = "../media/example.mp3";

Preload files with Dropbox

When saving with dropbox a preload file is created which already contains the correct shared link to the media file. No manual changes are necessary. The preload file is used by specifying the shared link to the preload file as parameter. For example:
    http://wim.vree.org/js/abcweb.html?https://www.dropbox.com/s/5bzjei7izfgxirb/gadma.js
This example loads abcweb from its website and loads the preload file gadma.js from the user's dropbox.

Settings

Several assigments can be manually added to a preload file. The following assignments are recognized:
    no_button = true;
    no_speed = true;
    msc_credits = "arbitrary credits text here (with html formatting)"
    autoScale = true;
    lineCursor = true;
    msc_shading = 0.2;
    media_height = "40%";
- no_button causes abcweb to hide the "buttons"-checkbox on the webpage. (so visitors cannot change anything)
- no_speed causes abcweb to hide the speed buttons and teh loop checkbox.
- the contents of msc_credits will be displayed next to, and to the right of, the media player.
- autoScale will turn this feature on when loading the webpage.
- lineCursor will display a line cursor in the score in stead of measure shading.
- msc_shading sets the opacity of the measure shading (0.0 is no shading, default: 0.2, solid color is 1.0).
- media_height sets the height of the media as a percentage of the window height (video height, default 50%).

Operation without internet connection


When you want to run abcweb.html on a computer without internet connection you need to put four extra javascript files (that are normally loaded automatically from the internet) into the same directory as abcweb.html:
    jquery-1.11.0.min.js
    abc2svg-1.js
    abcweb-min.js
    xml2abc-min.js
These files are included in abcweb_26.zip.

Extra parameters in the URL

Abcweb.html recognizes several extra parameters in the URL:
  1. xml=file_name and med=file_name. For example, when using dropbox:
        http://wim.vree.org/js/abcweb.html?xml=dropbox_link_to_score_file&med=dropbox_link_to_media_file
    
    or with your own webserver:
        http://your.domain/abcweb.html?xml=relative_path/to/scorefile&med=relative_path/to/mediafile
    
    The first example uses abcweb from the standard location and loads the other files from your dropbox.
    In the second example both score file and media file are located on your.domain, the same domain from where abcweb.html is opened. This causes abcweb to preload the score file and the media file from the server. Despite its name, the xml=file_name parameter can also load an ABC file.
  2. syn marks the sync checkbox.
  3. nj clears the jump ceckbox. For example:
        http://wim.vree.org/js/abcweb.html?xml=dropbox_link&med=dropbox_link&syn&nj
    
    This prepares the score and media for synchronization in your dropbox.
  4. nb hides all buttons (except the speed buttons and the loop checkbox)
  5. nsp hides the speed buttons and the loop checkbox. For example:
        http://wim.vree.org/js/abcweb.html?dropbox_link&nb&nsp
    
    loads a preload file and hides all buttons.
Notes:
  • In stead of specifying query parameters xml=... and med=... one can also (and better) use a preload file. But when granting access to a large collection of score files on a server, it may be preferable not to have to provide an extra preload file for every score/media file.
    The advantage of using a preload file is that it also provides synchronization data and other preferences.
  • You can not use the query parameters xml=... and med=... when abcweb is started from the local file system on your pc (double click abcweb.html). A preload file, on the other hand, can always be used. Even when abcweb.html is opened from the local file system.