JavaScript API methods for controlling playback
Here are the Soundslice JavaScript API methods for controlling playback.
Playing
var ssiframe = document.getElementById('ssembed').contentWindow;
ssiframe.postMessage('{"method": "play"}', 'https://www.soundslice.com');
Pausing
var ssiframe = document.getElementById('ssembed').contentWindow;
ssiframe.postMessage('{"method": "pause"}', 'https://www.soundslice.com');
Seeking
var ssiframe = document.getElementById('ssembed').contentWindow;
// Seek to 3.5 seconds
ssiframe.postMessage('{"method": "seek", "arg": 3.5}', 'https://www.soundslice.com');
Setting a loop
Here, arg
should be an array with exactly two elements: the loop’s start time and end time (both in seconds).
var ssiframe = document.getElementById('ssembed').contentWindow;
// Set loop: from timecode 1.5 seconds to timecode 3 seconds
ssiframe.postMessage('{"method": "setLoop", "arg": [1.5, 3]}', 'https://www.soundslice.com');
Clearing the loop
If the user has selected a portion of notation to loop it, this method will clear that loop. Note that this is a no-op if there’s no active loop.
var ssiframe = document.getElementById('ssembed').contentWindow;
ssiframe.postMessage('{"method": "clearLoop"}', 'https://www.soundslice.com');
Changing speed
Here, you specify the desired speed as a float, where 1
is normal speed and 0.5
is half speed.
Note that the minimum and maximum allowed speeds depend on the user’s browser and the type of recording. If you try setting a speed that’s slower than the minimum speed or faster than the maximum speed, the player will use the minimum or maximum speeds, respectively.
var ssiframe = document.getElementById('ssembed').contentWindow;
// Change speed to 50%
ssiframe.postMessage('{"method": "setSpeed", "arg": 0.5}', 'https://www.soundslice.com');
Changing volume
Here, you specify the desired volume as a float, where 1
is full volume and 0
is fully muted.
var ssiframe = document.getElementById('ssembed').contentWindow;
// Change volume to 50%
ssiframe.postMessage('{"method": "setVolume", "arg": 0.5}', 'https://www.soundslice.com');
Changing recordings
Here, you specify the zero-based index of the desired recording. You control the order of recordings in the slice manager.
var ssiframe = document.getElementById('ssembed').contentWindow;
// Change recording to the second one (index 1)
ssiframe.postMessage('{"method": "changeAudioByIndex", "arg": 1}', 'https://www.soundslice.com');
Loading recordings
Here, you specify the zero-based index of the desired recording. You control the order of recordings in the slice manager. Note that loading a recording doesn’t start playback and doesn’t change the currently active recording; loading happens in the background.
For recordings that are videos, Soundslice doesn’t do any preloading, because videos are always streamed in real time, rather than preloaded into memory. If you call this method for a video, it will just be a no-op.
var ssiframe = document.getElementById('ssembed').contentWindow;
// Load audio for the second recording (index 1)
ssiframe.postMessage('{"method": "loadAudioByIndex", "arg": 1}', 'https://www.soundslice.com');
Changing the video URL
Use the changeRecordingVideoUrl
method to change a recording’s video URL.
This is useful if you have a custom video-hosting system and have short-lived video URLs that expire. Rather than constantly changing the video URL in our system, you can switch the video client-side. The save will not persist across player sessions.
The method takes an arg
, an array with parameters in this order:
- Recording index (integer). This is a zero-based index. For example,
0
is the Synthetic recording that appears first in the “Recordings” list. Open the Recordings menu in the player to view the list of recordings and note their order. - New MP4 URL (string). Can be blank if you’re only using an HLS playlist.
- New HLS playlist URL (string). Can be blank if you’re only using an MP4 URL.
Note this method will only work for recordings of type “Video URL.” Also, make sure to include "http://"
or "https://"
.
Example:
var ssiframe = document.getElementById('ssembed').contentWindow;
// Change the video URLs for recording index 1
ssiframe.postMessage('{"method": "changeRecordingVideoUrl", "arg": [1, "http://example.com/test.mp4", "http://example.com/test.m3u8"]}', 'https://www.soundslice.com');