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.
Download the SDK from HERE
It is required to add the script xman.min.js on a page to embed.
<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)
new AdMan.Manager({...admanId: 777,...});
The list of supported players:
new AdMan.Manager({...playerId: "jquery_jplayer_1",playerType: AdMan.PlayerType.JPLAYER,...});
To display a banner the parameter banner is used, which defines the element to embed a banner and its dimensions.
<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.
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 |
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 |
Mode Name | Description |
AdMan.Overlay.Animate.OPACITY | |
AdMan.Overlay.Animate.SLIDE | |
AdMan.Overlay.Animate.BLUR | |
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 [] |
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 b640x640 |
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 |
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"]...});
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 |
new AdMan.Manager({...events: {adLoad: function() {},adReady: function(section) {},adStarted: function() {},adCompleted: function() {},adNone: function() {}}...});
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.
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",...});
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.
<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>
jPlayer
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.
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.
AdMan depends on the following libraries
jQuery (link)
<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>