Web SDK

Introduction

AdMan javascript library is used to load advertisement content, to start an audio ad, to control playback, to display a banner and to display an advertisement text as a scrolling message.

Advertisement audio playback could be started automatically at the start of site player playback or in manual mode. The site player has paused automatically while playing the advertisement audio.

Embedding

Download the SDK from HERE

It is required to add the script xman.min.js on a page to embed.

Integration Example:

<script type="text/javascript" src="xman.min.js"></script>
<script type="text/javascript">
new AdMan.Manager({
playerId: "<Player id>",
playerType: "<Player type>",
admanId: "Advertising identifier",
overlay: [<Set of interface overlays>]
});
</script>

AdMan ID should be sent as an object with the following attributes:

  • siteID - Site ID (Required, must be supplied by support team)

  • playerID - player ID for corresponding site (optional)

Usage Example:

new AdMan.Manager({
...
admanId: 777,
...
});

Supported Players:

The list of supported players:

Usage Example:

new AdMan.Manager({
...
playerId: "jquery_jplayer_1",
playerType: AdMan.PlayerType.JPLAYER,
...
});

Displaying a banner

To display a banner the parameter banner is used, which defines the element to embed a banner and its dimensions.

Usage Example:

<script type="text/javascript">
new AdMan.Manager({
...
banner: {
id: "banner_container",
width: 728,
height: 90
}
...
});
</script>

The banner display could be set up more precisely via the overlay system.

Overlays

The script allows the display of an advertisement banner, text and interface to control audio playback via the overlay system. The overlay parameter receives an array of elements with the following fields:

Field

Description

id

an overlay id

target

a jQuery selector of the element to embed the overlay into

mode

overlay embedding mode

Possible overlay modes

Mode Name

Description

AdMan.Overlay.Mode.REPLACE

the overlay replaces the element

AdMan.Overlay.Mode.BEFORE

the overlay is embedded before the element

AdMan.Overlay.Mode.AFTER

the overlay is embedded after the element

AdMan.Overlay.Mode.PREPEND

the overlay is embedded into beginning of the element

AdMan.Overlay.Mode.APPEND

the overlay is embedded into the end of the element

Overlay Animation

Mode Name

Description

AdMan.Overlay.Animate.OPACITY

AdMan.Overlay.Animate.SLIDE

AdMan.Overlay.Animate.BLUR

Overlay Parameters

Name

Description

default

content

HTML code of an overlay

src

URL to overlay content

showOn

an array of events initializing overlay showing, by default ["adStarted"]

closeOn

an array of events initializing overlay hiding, by default []

Classes of overlay elements

Class name

Description

unisound-text

an ad text is set to the element

unisound-marquee

animates element with a scrolling message

unisound-link

the element is wrapped in an ad link

unisound-banner

a banner is added to the element

b[width]x[height]

is used with unisound-banner and allows the choice from the following banner dimensions:

b728x90

b468x60

b300x250

b240x400

b200x300

b160x160

b128x128

unisound-left

playback remaining time is set to the element

unisound-close

the element is used to close the overlay, the attribute "data-delay" is used to set the time after which the element will be disabled in seconds

unisound-restart

the element is used to rewind playback to beginning

unisound-pause

the element is used to pause playback (hides on paused)

unisound-play

the element is used to resume playback (hides on resumed)

unisound-volume-back

the element is used to adjust playback volume

unisound-volume-fore

the element is used to display the current playback volume

Usage Example:

new AdMan.Manager({
...
overlay: [
//banner
{
target: ".a1"
showOn: ["adStarted"], closeOn: [],
mode: AdMan.Overlay.Mode.REPLACE,
animate: AdMan.Overlay.Mode.OPACITY,
content:
"<div>" +
"<div class='unisound-banner b728x90'></div>" +
"<div class='unisound-close' data-delay='10'></div>" +
"</div>"
},
//scrolling message
{
target: ".a2"
showOn: ["adStarted"], closeOn: ["adCompleted"],
mode: AdMan.Overlay.Mode.APPEND,
animate: AdMan.Overlay.Mode.SLIDE,
content:
"<div>" +
"<div class='unisound-text unisound-marquee unisound-link'></div>" +
"</div>"
},
//control
{
target: ".a3"
showOn: ["adStarted"], closeOn: ["adCompleted"],
mode: AdMan.Overlay.Mode.APPEND,
animate: AdMan.Overlay.Mode.SLIDE,
content:
"<div>" +
"<div class='unisound-restart'>Restart</div>" +
"<div class='unisound-play'>Play</div>" +
"<div class='unisound-pause'>Pause</div>" +
"<div class='unisound-volume-back'>" +
"<div class='unisound-volume-fore'>" +
"</div>" +
"<div class='unisound-left'></div>" +
"</div>"
},
//content loaded by url
{
target: ".a4"
showOn: ["adStarted"], closeOn: ["adCompleted"],
mode: AdMan.Overlay.Mode.PREPEND,
animate: AdMan.Overlay.Mode.SLIDE,
src: "/static/overlay.html"
]
...
});

Ad Events

The following events can be generated:

Event Name

Description

adLoad

an ad request is sent

adNone

there is no ad for the user

adReady

the ad is ready to play

adStarted

the ad playback is started

adCompleted

the ad playback is finished

Usage Example:

new AdMan.Manager({
...
events: {
adLoad: function() {},
adReady: function(section) {},
adStarted: function() {},
adCompleted: function() {},
adNone: function() {}
}
...
});

DTMF

Instreamatic allows an advertisement to be embedded instream at an appropriate time using DTMF label markup. The instreamatic server listens to the radio stream and detects DTMF labels. It sends the signal to all clients after which targeting and ad playback occurs.

To implement this approach, contact us and provide your radio stream URL along with the DTMF codes used.

Usage on Mobile Web

To play ads on mobile devices, you need to add in the constructor parameter memory mobileInit, value - Elements of play selector buttons. The look should be like this:

new AdMan.Manager({
...
mobile: "#play-btn",
...
});

Controlling the playback manually

It is possible to control the ad playback in manual mode. (Parameters playerType and playerId are not used._

An ad playback is initialized by calling start() method of AdMan.Manager. Site player playback should be started on events adNone and adCompleted.

Usage Example:

<button class="play_button">Play<button>
<div id="banner_container"><div>
<script type="text/javascript" src="xman.min.js"></script>
<script type="text/javascript">
var adman = new AdMan.Manager({
admanId: 777,
banner: {
id: "banner_container",
width: 728,
height: 90
},
events: {
adNone: function() {
// start player
// $("#player").play();
},
adCompleted: function() {
// start player
// $("#player").play();
}
}
});
$(".play_button").click(function() {
adman.start();
});
</script>

Integration Examples

Ad-Enabled Web Player

jPlayer-u is a player with the embedded advertisement library. It recognizes DTMF labels and IceCast stream metadata. The player is based on jPlayer codebase. In order to work with an advertisement, player initiation parameters should contain the field "adman" used to tune ad settings.

$("#jquery_jplayer_1").jPlayer({
...
adman: {
admanId: 777,
startOn: ["playing"]
}
});

To work with IceCast stream it is required to add the flag icy: true. IceCast Server must be patched to send metadata when the request URL contains parameter icy-metadata=1, because flash can't set the request header icy-metadata. To start an ad audio playback on metadata get it is required to set up parameter startOn: ["icy"].

$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
title: "n/a",
mp3: "http://unisound.net/radio/ices?icy-metadata=1",
icy: true
});
},
icy_metadata: function(event, data) {
},
supplied: "mp3",
solution: "flash",
wmode: "transparent",
useStateClassSkin: true,
adman: {
admanId: 777,
startOn: ["icy"]
}
});

Work with IceCast stream is possible by only using the following solution: "flash". Download the example HERE

To work with DTMF labels it is requered to set the parameter dtmf in a media object. This parameter sets the sequence of label tones. To start an ad audio playback on metadata get it is required to set up parameter startOn: ["dtmf"].

$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
title: "n/a",
mp3: "http://ep128.hostingradio.ru:8030/ep128",
dtmf: {
in: ["1", "D", "6", "2"],
out: ["2", "6", "D", "1"]
}
});
},
dtmf_in: function(event, time) {},
dtmf_out: function(event, time) {},
supplied: "mp3",
solution: "flash",
wmode: "transparent",
useStateClassSkin: true,
adman: {
admanId: 777,
startOn: ["dtmf"]
}
});

Work with dtmf labels is possible by only using the following solution: "flash". Download the example HERE.

Solution for Phonegap

Adobe PhoneGap is an open source distribution of Cordova — framework to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs. AdMan — javascript library, used to load advertisement content.

Requirements:

AdMan depends on the following libraries

Integration Example:

<script type="text/javascript" src="adman.min.js"></script>
<script type="text/javascript">
var adm = Adman.Mobile.getDefaultView(777, "#audioTag", "#sampleDivElement");
adm.events.adReady = () -> {
adm.show();
};
adm.preload();
</script>