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.
Note: These directions are for the current version of Braille Music Viewer. If you are using a Braille Music Viewer version 0.9.3b or earlier, visit this page for instructions.
Quick Start
To use Braille Music Viewer on your web page:
1. Include the following code in the <head> section of your HTML document:
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 an <object>...</object> element in your page where you want the example to appear. There are two types of parameters that can be included, as described below.
Attributes inside the object tag pertain to the viewer frame itself.
type: this parameter indicates the type of data contained by the object, and must be set to application/braillemusic.
data: this parameter must contain a pathname to a braille music score file. Braille music scores can be created using Braille Music Notator. In that program, choose "Save File" from the File dialog to create a score file (which ends in .brm) and upload it to your web host. The data parameter will accept a relative pathname or an absolute URL. (See Embedding Score Files below for an alternative method.)
width: this parameter can be set to specify a width of the viewer in pixels. If this parameter is omitted, the viewer will be set to the width of the enclosing object (for example, a <div> with a width set by CSS).
height: this parameter can be set to specify a height of the viewer in pixels. If this parameter is omitted, the viewer will be set to the height of the enclosing object (for example, a <div> with a height set by CSS).
Settings for the score being displayed are included as <param> tags between the <object> tags.
initialView: this parameter specifies the initial setting for the score. A value of "translation" indicates translated symbols; "braille" indicates braille characters. The viewer displays a toggle for the user to switch between translated symbols and braille symbols. If this tag is omitted, the viewer will display translated symbols by default.
scrollable: this parameter specifies whether or not the user will be able to scroll the score in the viewer. A value of "true" indicates a scrollable score, and "false" indicates a non-scrollable score. If this tag is omitted, the viewer will not be scrollable by default.
drawSmallDots: this parameter specifies whether braille characters will be shown with small dots in unused dot positions. A value of "true" indicates that small dots will be used, and "false" indicates that unused positions will be left blank. If this tag is omitted, unused positions will be left blank.
scoreSize: this parameter specifies the level of magnification used by the viewer. The value refers to the pixel height of a single cell. If omitted, the viewer will display cells with a pixel height of 60.
scoreWidth: if the scrollable parameter is set to "true," this parameter specifies the width of the scrollable score. For example, is this value is set to 20, the user will not be able to scroll past column 20. This parameter does not affect the size of the viewer, which can be set with the width parameter described above or using CSS.
scoreHeight: if the scrollable parameter is set to "true," this parameter specifies the height of the scrollable score. For example, is this value is set to 10, the user will not be able to scroll past row 10. This parameter does not affect the size of the viewer, which can be set with the height parameter described above or using CSS.
Embedding Score Files
As an alternative to referring to a separate document, Braille Music Viewer supports including the code of a braille music score file directly in the HTML code of a web page. To do so, simply copy the XML code of the BRM file and place it inside the <object> tag, and omit the "data" attribute. (If the viewer contains both a data attribute and embedded score data, it will use the file referenced by the data attribute.)