Braille Music Viewer

v0.9.4b 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.

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:

<script>WebFontConfig = { custom: { families: ['Bravura'], urls: ['https://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="https://tobyrush.com/braillemusic/viewer/viewer.js"></script>
<style> score-braille {display: none;} </style>

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.

<object type="application/braillemusic" data="scorefile.brm">
    <param name="initialView" value="translation">
    <param name="scrollable" value="true">
    <param name="drawSmallDots" value="false">
    <param name="scoreSize" value="50">
    <param name="scoreWidth" value="20">
    <param name="scoreHeight" value="10">
</object>

Attributes inside the object tag pertain to the viewer frame itself.

Settings for the score being displayed are included as <param> tags between the <object> tags.

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.)