Audioburst Embedded Player

Overview

This document explains how to embed an Audioburst player in your application and also defines the parameters that are available in the Audioburst embedded player.

By appending parameters to the IFrame URL, you can customize the playback experience in your application. For example, you can automatically play audio using the autoplay parameter.

This page currently defines all parameters supported in any Audioburst embedded player. Each parameter definition identifies the players that support the corresponding parameter.

Note: Embedded players must have a viewport that is at least 200px by 200px. If the player displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend at least 480 pixels wide and 270 pixels tall.

Demo Player

Embed an Audioburst player

You can use any of the following methods to embed an Audioburst player in your application and specify player parameters. Note that the instructions below demonstrate how to embed a player that loads a specific burst (audio) and its related bursts or if using Audioburst's diverse range of API calls, any playlist you wish. The following section explains how to configure your player to load other types of content, such as playlists and search results.

Embed a player using an <iframe> tag

Define an <iframe> tag in your application in which the src URL specifies the content that the player will load as well as any other player parameters you want to set. The <iframe> tag's height and width parameters specify the dimensions of the player.

If you create the <iframe> element yourself, you can append player parameters directly to the end of the URL. The URL has the following format:

https://search.audioburst.com/embed/BurstID
        

The <iframe> tag below would load a 600x450px player that would play the Audioburst burst eKeR2JXBYr72. Since the URL sets the autoplay parameter to true, the burst would play automatically once the player has loaded.

<iframe id="abplayer" type="text/html" width="600" height="450"
src="https://search.audioburst.com/embed/eKeR2JXBYr72?player_mode=mini&show_image=true&autoplay=true"
frameborder="0"></iframe>
        

Embed a player using the IFrame Player API

Follow these instructions to insert an audio player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the audio player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.

The HTML and JavaScript code below shows a simple example that inserts an Audioburst player into the page element that has an id value of abplayer. The onAudioburstPlayerAPIReady() function specified here is called automatically the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.

<script src="https://search.audioburst.com/iframe_api.js" async defer onload="onAudioburstPlayerAPIReady()" ></script>
<div id="abplayer"></div>
    
<script>
// Replace the 'abplayer' element with an <iframe> and
// Audioburst player after the API code downloads.
var player;
function onAudioburstPlayerAPIReady() {
    player = new AB.Player('abplayer', {
                playerMode: 'full_small',
                autoplay: true,
                showImage: true,
                width: 600,
                height: 450,
                contentAPI: "https://developersapi.audioburst.com/v2/topstories"
            });
    }
</script>
        

Select content to play

You can configure your embedded player to load single audio item, a playlist, or search results for a particular query.

The following list explains these options:

  • Loading an audio burst

    For an IFrame embed, the Audioburst burst ID for the audio that you want to load is specified in the IFrame's src URL.

    https://search.audioburst.com/embed/BurstID
                    

    If you are using the Audioburst APIs (v2), you can programmatically construct these URLs by retrieving burst IDs from any API call. After obtaining a Burst ID, replace the BurstID text in the URL above with that value to create the player URL.

  • Loading a playlist or search results for a specified query

    Remove the specific burstId value from the IFrame API code and set the contentAPI player parameter to any suporrted Audioburst API call that returns bursts as a result.

    https://developersapi.audioburst.com/v2/topstories
                    

Supported parameters

All of the following parameters are optional.

Parameters
autoplay
This parameter specifies whether the initial audio burst will automatically start to play when the player loads. Supported values are true or false. The default value is false.
showImage
This parameter specifies whether the embedded player will contain a burst or category image. Supported values are true or false. The default value is true.
playerMode
This parameter specifies whether the embedded player will be rendered in a Full or Minimized version. Supported values are full or full_small or mini. The default value is true.
contentAPI
This parameter specifies which Audioburst API to utilize to build the audio playlist, this allows full flexibility and control over the content played.

Note: There is no need to add the Subscription Key