The Soundslice player JavaScript API
The Soundslice player’s JavaScript API lets you control our player from within your own web page. For example, you can use this to:
- Provide your own UI for play/pause
- Roll your own analytics on which moments are being practiced the most
- Modify sheet music on the fly, given your users’ preferences
Note: The JavaScript API is only available for our “full” embed, not our miniplayer.
For performance reasons, our player’s API isn’t active by default. To activate it, add the URL parameter api=1 to your iframe, like this:
<iframe src="https://www.soundslice.com/slices/TEST/embed/?api=1" ...>You’ll also probably want to add an id attribute to the <iframe>, so that your own JavaScript can reference it. For example:
<iframe id="ssembed" ...>You can then get a reference to the <iframe> like so:
var ssiframe = document.getElementById('ssembed').contentWindow;Sending messages to the player
We use the standard postMessage API. In each case, JavaScript code from your own page (the parent page) calls postMessage() on the iframe’s contentWindow attribute, passing a serialized JSON object with a method key. In some cases, there’s an additional arg key.
Note that the postMessage() calls require you to pass the proper target origin parameter, which is "https://www.soundslice.com", to avoid cross-site scripting attacks.
Example message:
var ssiframe = document.getElementById('ssembed').contentWindow;
ssiframe.postMessage('{"method": "play"}', 'https://www.soundslice.com');
Parsing responses
Our player emits various events, along with responses to certain API methods. All of this communication happens via postMessage. See these pages for more: