JavaScript API methods for altering notation

Here are the Soundslice JavaScript API methods for altering notation.

Zooming notation

Here, you specify the zoom level, as an integer, in order to increase or decrease the size of notation. Default zoom is 0, and allowed values are integers between -25 and 25. The bigger the number, the bigger the notation.

var ssiframe = document.getElementById('ssembed').contentWindow;

// Set zoom level to 25
ssiframe.postMessage('{"method": "setZoom", "arg": 25}', 'https://www.soundslice.com');

Setting the notation width

Use setStaveWidth to set an explicit notation width. This is a number, measured in staff spaces; see here for more details.

The method takes an arg, an integer. Example usage:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Set notation width to 60
ssiframe.postMessage('{"method": "setStaveWidth", "arg": 60}', 'https://www.soundslice.com');

Setting the layout

Use setLayout to set the notation layout. This takes an arg with the following options:

• 2 — Horizontal scrolling layout
• 4 — Vertical scrolling layout
• 5 — Paged layout

Example:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Change to use Paged layout
ssiframe.postMessage('{"method": "setLayout", "arg": 5}', 'https://www.soundslice.com');

Setting the pages per screen

If notation is in Paged layout, use setPagesPerScreen to specify the number of pages per screen.

This takes a required arg, the number of pages per screen. Use 0 for “automatic,” which will decide based on the screen width.

Example:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Change to 2 pages per screen
ssiframe.postMessage('{"method": "setPagesPerScreen", "arg": 2}', 'https://www.soundslice.com');

Proportional notation

There are two API methods to control proportional notation:

• setProportionalNotation turns proportional notation on or off.
• setProportionalSize sets the base proportional width (see here).

Example:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Activate proportional notation
ssiframe.postMessage('{"method": "setProportionalNotation", "arg": true}', 'https://www.soundslice.com');

// Set base proportional width to 42
ssiframe.postMessage('{"method": "setProportionalSize", "arg": 42}', 'https://www.soundslice.com');

Toggling notation visibility

For slices with videos, you can toggle the notation on/off. If you toggle the notation off, then the video will take up the entire width of the player. See also the ssNotationVisibility event.

var ssiframe = document.getElementById('ssembed').contentWindow;

// Turn off notation
ssiframe.postMessage('{"method": "setNotationVisibility", "arg": false}', 'https://www.soundslice.com');

// Turn on notation
ssiframe.postMessage('{"method": "setNotationVisibility", "arg": true}', 'https://www.soundslice.com');

Toggling visibility of aspects of notation

Use the setTrackVisibility method to control which aspects of notation are visible, on a per-instrument basis or globally (across all instruments).

This method takes three arguments:

• type (integer, required) — the aspect of notation you want to change.
• arg (integer, required) — either 0 (to hide) or 1 (to show).
• track (integer, optional) — a zero-based instrument index. Note that, in case of grand staff parts, the two staves are treated as separate instruments. If you don’t provide track, your change will apply to all instruments.

The following are valid values for type if you use this method with a track parameter:

• 1 — Staff notation
• 2 — Tablature
• 3 — Tablature stems
• 4 — Chord names
• 5 — Chord diagrams
• 6 — Lyrics
• 7 — Fingering
• 8 — Sticking

If you omit track, you will affect all instruments. In this case, the previous type values are all valid, plus the following additional ones:

• 9 — Pitch names
• 10 — Colors
• 11 — Bar numbers at the start of every system
• 12 — Bar numbers every bar
• 13 — Title at top of notation
• 14 — Instrument names in the first system
• 15 — Instrument names in every system
• 16 — Empty staves (0 means to hide them)
• 17 — Expand repeats
• 18 — Rhythm counts

Example usage:

var ssiframe = document.getElementById('ssembed').contentWindow;

// Hide fingering in the first instrument.
ssiframe.postMessage('{"method": "setTrackVisibility", "track": 0, "type": 7, "arg": 0}', 'https://www.soundslice.com');

// Show fingering in the first instrument.
ssiframe.postMessage('{"method": "setTrackVisibility", "track": 0, "type": 7, "arg": 1}', 'https://www.soundslice.com');

// Show rhythm counts in all instruments.
ssiframe.postMessage('{"method": "setTrackVisibility", "type": 18, "arg": 1}', 'https://www.soundslice.com');

Transposing notation

Use the transpose method to transpose the slice’s notation.

This method takes one required argument: arg, an integer specifying the number of half steps from the slice’s default notation. Valid values are from -12 to 12 inclusive. To reset, use 0.

var ssiframe = document.getElementById('ssembed').contentWindow;

// Transpose notation up a half step
ssiframe.postMessage('{"method": "transpose", "arg": 1}', 'https://www.soundslice.com');

Printing notation

Use the print method to initiate printing for the slice’s notation. This is equivalent to the user clicking the “Print” button manually in our player.

Note that the slice must have printing enabled via its advanced settings. If printing is not enabled for the slice, this API method will do nothing.

Also note that opening printing via this API method might trigger browsers’ pop-up blockers. If you use this API method, we highly recommend attaching it to a click handler, as that will be less likely to trigger pop-up blockers.

var ssiframe = document.getElementById('ssembed').contentWindow;

// Print notation 
ssiframe.postMessage('{"method": "print"}', 'https://www.soundslice.com');