The JS Player and SDK is client-side JavaScript library that is completely separate from the API. You connect to it differently, and it gives you a different range of options.
Install
You can install the JS Player and SDK through NPM:
npm install --save @speechkit/speechkit-audio-player-v2
Or, you can also reference an up‐to‐date version on our CDN:
<script type="module">
import SpeechKit from 'https://proxy.speechkit.io/npm/@speechkit/speechkit-audio-player-v2@latest/dist/module/index.js';
</script>
Initialize
To initialize the JS Player use the following:
SpeechKit.player({
renderNode: "...",
projectId: "...",
// One of the following parameters
podcastId: "...",
articleUrl: "...",
externalId: "...",
}).then((appInst) => {
// Player is initialized
});
To intialize the JS Player with the SDK import the package:
import { SpeechKitSdk } from '@speechkit/speechkit-audio-player-v2';
Then use the following:
SpeechKitSdk.player({
renderNode: "...",
projectId: "...",
// One of the following parameters
podcastId: "...",
articleUrl: "...",
externalId: "...",
}).then((appInst) => {
// Player is initialized
// App instance provides access to methods & events (see below)
});
The Player SDK will now be available and you will be able to use the JS Player SDK.
Mandatory Parameters
projectId
integer
This is the Project ID.
podcastID
integer (conditional)
This is the podcast ID
from the SpeechKit API response.
externalID
integer (conditional)
This is your internal article ID
articleUrl
string (conditional)
This is the article url.
Advanced Parameters
renderNode
string (optional)
This is the ID of the container element. The default is set to speechkit-player
.
UIenabled
boolean (optional)
Set to false to use the player without the UI.
publisherColor
string (optional)
Set the color of the player icons and progress bar, e.g, #000000
.
publisherBgColor
string (optional)
Set the color of the player background, e.g, #F5F5F5
.
Player Methods
Once the basic player setup, various methods are available to control the audio, set the player language, or obtain information about the player state.
Player methods can be called directly eg. AppInst.play()
or you can create an new object within the window object and add the methods you want available, as shown here:
SpeechKitSdk.player(parameters).then(appInst => {
appInst.play();
window.YourApp = {
paused() {
const result = appInst.paused();
console.log(`fn_paused() -> ${result}`);
},
};
)};
Methods can be called using YourApp.paused()
.
Methods:
play()
-
This method plays the audio.
pause()
-
This method pauses the audio.
changeLang(lang)
string
This method changes the text language within the player.
paused()
-
This method determines whether or not the player is paused.
currentTime()
-
This method gets the current time in seconds, rounded to two decimal places, eg 28.05
.
duration()
-
This method gets the total duration of the audio in seconds, rounded to two decimal places, eg 28.05
.
remainingTime()
-
This method gets the time remaining of the audio in seconds, rounded to two decimal places, eg 28.05
.
changeCurrentTime(seconds)
number
This method sets play position between 0 and total duration in seconds, rounded to two decimal places, eg 18.05
.
rewind(seconds)
number
This method rewinds the playback by the specified seek time in seconds eg 5.0
.
forward(seconds)
number
This method fast forwards the playback by the specified seek time in seconds eg 5.0
.
Player Events
You can run custom functions based on specific player events using the on
and off
listener to bind your functions to the events:
SpeechKitSdk.player(parameters).then(appInst => {
// Bind to the play event:
appInst.events.on(SpeechKitSdk.Events.play, dataEvent => {
console.log(`on -> ${SpeechKitSdk.Events.play} -> `, dataEvent);
});
// on -> play -> { duration: 10.23, progress: 3.12 }
});
play
This event fires when playback is initiated.
Event data:
duration
number
The total duration of the audio in seconds, rounded to two decimal places, eg 28.05
.
progress
number
The duration of the audio already played in seconds, rounded to two decimal places, eg 28.05
.
Sample event data:
{
"duration": 30.04,
"progress": 10.6,
}
pause
This event fires when audio is paused.
Event data:
duration
number
The total duration of the audio in seconds, rounded to two decimal places, eg 28.05
.
progress
number
The duration of the audio played, when the pause was triggered, in seconds, rounded to two decimal places, eg 28.05
.
Sample event data:
{
"duration": 30.04,
"progress": 10.6,
}
timeUpdate
This event fires every 25ms during playback and indicates, in seconds, the duration of the audio that has been played, eg 28.05
.
Event data:
duration
number
The total duration of the audio in seconds, rounded to two decimal places, eg 28.05
.
progress
number
The duration of the audio played in seconds, rounded to two decimal places, eg 28.05
.
Sample event data:
{
"duration": 30.04,
"progress": 10.6,
}
playbackRate
This event fires when the playback rate of the audio in the player changes.
Event data:
playbackRate
number
The new playback rate, eg 1.5
.
{
"playbackRate": 1.5
}
ended
This event fires when the audio completes playback.
Event data:
playbackRate
number
The new playback rate, eg 1.5
.
{
"playbackRate": 1.5
}