The Whooshkaa Web Player allows podcasts to be embedded onto a web page, or any other environment where a web view is available. In the past this has included podcast pages, corporate pages, blogs and apps on iOS and Android, among others.


Embedding a Whooshkaa Player

To use the Whooshkaa JS API, you will need to use the Whooshkaa Player via JS option when getting your embed code. Please see the following pages for more information on how to embed a player:


oEmbed and Embedly

In addition to the information on this page, Whooshkaa Web Players also support oEmbed and can be embedded in pages where Embedly is supported.


Player.js

The Whooshkaa JS API for the Web Player has been designed to support Player.js, with a number of additional methods to improve referencing and tracking ability. 


JavaScript API Reference

A player is embedded using a <div> tag as a placeholder and the Whooshkaa JS API script tag to bootstrap it. 


The placeholder usually looks something like this (your code will have different options:

<div
  class="whooshkaa-widget-player"
  data-episode-id="999999999"
  data-theme="light"
  data-height="190"
  data-enable-volume="true"
></div>


The tag looks like this (please see your embed code for the latest version). 
Important: There should only be one of these on the page.

<script src="https://webplayer.whooshkaa.com/js/widget/loader.umd.min.js"></script>


Getting a reference to a player

Once the player has been loaded on the page, a reference to the player manager will be available under the whooshkaaPlayer object and all of the players under the whooshkaaPlayer.players array. For example, to get the first (or only, if there is only one) player reference, use the following code:

whooshkaaPlayer.players[0]


The player's instance make a number of methods and events available.


Methods

Methods below that begin with "get" provide values via callbacks. For example, to get the muted state on a player, you can use the following.

whooshkaaPlayer.players[0].getMuted((isMuted) => {
    // isMuted now contains the muted state
    console.log(isMuted)
})


play

Start playback on the player.


pause

Pause playback on the player.


getPaused

Returns true if the player is currently paused, false otherwise.


mute

Mute the volume on the player.


unmute

Disable the mute of volume on the player.


getMuted [boolean]

Gets the current mute state.


setVolume [number]

Sets the volume in the player. Value should be between 0 (silent) and 1 (loudest).


getVolume [number]

Gets the volume in the player. Value is between 0 (silent) and 1 (loudest).


getDuration [number]

Gets the duration in seconds of the audio currently playing.


setCurrentTime [number]

Sets the playback position in seconds of the current playable.


getCurrentTime [number]

Gets the playback position in seconds of the current playable.


getCurrentPlayable [object]

Returns a reference to the current playable, containing its ID and title, along with other information. This may be useful if you have external tracking enabled. Please note that the type below may be an episode or a highlight.
Sample response:

{
  id: 987654321
  title: "Ep. 212 - Abstraction of others"
  description: "In this episode we explore how to avoid conflict with others."
  type: "episode"
  show: {
    id: 1234,
    title: "The World According to Me"
  }
}




Events

Hooking into events is an easy way to get an update as things occur in the player. To use these events, you can use the on method on the player instance. For example, to get an event for every time update, you can use the following:

whooshkaaPlayer.players[0].on('timeupdate', (currentTime) => {
  // currentTime now contains the current time as "seconds" and the total duration of the
  // episode as "duration" (both in seconds):
  // {
  //   seconds: 11.95,
  //   duration: 1841.43   
  // }
})


ready

Fires when the player is ready to play.


play

Fires when the player has started to play.


pause

Fires when the player has been paused.


ended

Fires when the episode or highlight playing have reached the end of the duration.


timeupdate [object : { seconds : number, duration: number}]

Fires on update of the playback position. This can be used to track things such as quartile playback. The payload returned contains 2 nodes: seconds and duration The seconds property is the current playback position in seconds and the duration property is the total duration of the audio in seconds.


error

Fires when an error has occurred in the player.