voicebase-player

VoiceBase Player ^beta

The VoiceBase Player is a component for interactive visualization of VoiceBase transcripts and analytics that may be embedded into your user experience. Media and transcripts may be retreived from a VoiceBase account or optionally from a remote URL.

Currently, the player is in beta and the code may change significantly from the current version before a stable release. It is reccomended that you use the player as described below and avoid modifying the player base code in order to be able to take advantage of updates as they are released.

Features

The VoiceBase Player is intended to provide a UI for the the most common playback scenarios including:

• Playback of web supported audio and video formats with live transcripts
• Cue audio by clicking on transcript words
• Display Knowledge Discovery and Phrase Spotting Groups
• Show Agent Quality Metrics for a given recording
• Display Predictions for a given recording
• Higlight regions of audio relevant for any detectors that were enabled for transcription

Usage

1) Add the VoiceBase Player to your React project:

npm install --save voicebase-player

2) Add the player, its jwplayer dependency and styles

You need to now add the dependencies for the player to work to you page.

<link rel="stylesheet" href="node_modules/voicebase-player/lib/styles.css" />
<script src="node_modules/voicebase-player/lib/index.js"></script>

3) Instantiate the player as needed

The player comes in two different styles, either a URL player which plays existing files, or an API version that will communicate with Voicebase's platform to get the required assets.

To play existing files, the window will contain two different functions depending on your need

VoicebaseApiPlayer(
  config:{
    token:string,
    mediaId:string,
    searchString?:string,
    apiUrl: 'https://apis.voicebase.com/v3',
    analyticsFormat: 'ANALYTICS_SCHEMA_VERSION_V3',
  },
  element:Element|string
)

VoicebaseUrlPlayer(
  config:{
    analyticsUrl:string,
     mediaUrl:string,
    searchString?: string,
    analyticsFormat: 'ANALYTICS_SCHEMA_VERSION_V3',
  },
  element:Element|string
)

Calling either of these two functions will returns a player object which looks like:

class Player {
  render(): () => void,
  destroy(): () => void,
  // TODO: Future interface properties and event to be added here...
}

Lifecycle example:

const player = VoicebaseApiPlayer({token: 'xxx', mediaId: 'xxx'}, '#player');
// TODO: Further config can be added here in future...
player.render();

/* ... then later on ... */

// Remember to destroy the player if you are removing it.
player.destroy();

4) jQuery convenience method

If you are using jQuery, there is also a convenience plugin which allows you to instantiate the player via a jQuery selector. This plugin returns an array of player objects (not a jQuery collection) which can then be interacted with.

For example:

const players = $('#root').VoicebaseApiPlayer({token: 'xxx', mediaId: 'xxx'});
const player = players[0];
player.render();