Braille Music Viewer

v0.9.2b by Toby W. Rush

Braille Music Viewer is a tool web authors can use to display self-translating excerpts of braille music on any web page. It uses the functionality from Braille Music Notator, an online utility which displays braille music using symbols that are easy to read by people who are unfamiliar with braille music notation.

Quick Start

To use Braille Music Viewer on your web page:

1. Include the following code in the <head> section of your HTML document:

<script>WebFontConfig = { custom: { families: ['Bravura'], urls: ['http://tobyrush.com/braillemusic/viewer/css/viewer.css'] } };</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script type="text/javascript" src="http://tobyrush.com/braillemusic/viewer/bmviewer.js"></script>

An example of Braille Music Viewer, showing a C major scale.

2. Include the following in your beginning <body> tag:

<body onload="initializeBMViewers()">

(If you have another function being called in the "onload" event, simply make sure to call initializeBMViewers() from within that function.)

3. Lastly, include a musical example by placing a <canvas>...</canvas> element in your page where you want the example to appear. The parameters of the canvas element indicate the content of the example and several customizable options.

You can use the utility below to automatically build a canvas element ready to include in your page. To do so, create your musical example using Braille Music Notator, click and drag to select the area you want included in your example, and choose Copy from the Edit menu. Then place the cursor in the "Score Code" text area below and choose Paste from the Edit menu. (The pasted characters will look strange... it's fine!) Make any desired changes to the settings listed and click "Get Viewer Code"; the required code will appear in the "HTML Code" text area and the resulting viewer will be shown below. You can change settings and click "Get Viewer Code" again to update the code and example. When you are satisfied with the look and functionality of the viewer, simply copy the code from the "HTML Code" field and paste it directly into your web page's HTML.

Tips on advanced usage are included below the Viewer Code Generator.

Viewer Code Generator








Advanced Usage

If you prefer to create the code manually, the available parameters for the <canvas>...</canvas> are described here:

The initialAlternateInterface and ariaLiveID parameters above affect all Braille Music Viewer instances on the page. If you wish to set these parameters, you need only include them in one of the Braille Music Viewer tags on your page. Multiple different settings of these parameters on a single page will cause unpredictable behaviour.

The code above will always load the latest version of Braille Music Viewer into your page, even if a previous version was in place when your page was authored. Every attempt will be made to ensure that Braille Music Viewer maintains backward compatibility throughout future development. If, however, you wish to force a particular version of Braille Music Viewer to be used in your page, include version information in the first and third lines of the HTML code included in the <head> section as shown below:

<script>WebFontConfig = { custom: { families: ['Bravura'], urls: ['http://tobyrush.com/braillemusic/viewer/css/viewer-0.9.2b.css'] } };</script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script type="text/javascript" src="http://tobyrush.com/braillemusic/viewer/bmviewer-0.9.2b.js"></script>