JS Player and SDK

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
}