Documentation ZoomSounds jQuery

ZoomSounds Waveform Audio Player

Created: 03/04/2016
Author: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support - via item comments

Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, you can ask them in the Item Discussions.

Intro - top

The Audio Player. Reinvented.

Now with a playlist.

Features

HTML5 technology - this gallery uses the latest html5 tehniques to deliver a never seen before experience to your clients
fully responsive - looks great from mobile to HD
flash backup - ie7 and ie8 do not support html5, but those users are not forgetten, the sounds will play for them too via the flash player
one mandatory format - the hard part is done by the player script in order for the user to have easy experience editing - only mp3 is required
touch optimized - touch devices are not forgotten
three skins - three full skins to fit every brand
CSS3 technology - this player uses cutting-edge css3 definitions
easy install - purchase, download the zip, read the docs
iPhone / iPad optimized - this gallery has been optimized for Apple touch devices
Android optimized - this component has been tested on Android 4.0 and works awesome
developer / SASS powered - this component's CSS has been built on top of SASS which means SASS users will have an easy time modifying the skins. For non-SASS users it's no problem either because CSS files ( generated by SASS ) are provided
100% css skinable - want to make slight modifications to the skins ? The skins are 100% built from the css and it is very easy to edit with css knowledge
SEO friendly - built with search engine optimization on mind from the ground up, the Testimonial Rotator uses non hidden valid html markup to build the widget
compatible with all major browsers, including IE - compatible from IE7 to IE10, Chrome, Safari and Firefox

Installation - top

All you have to do for installing on your site (ie. yoursite.com) is copy the contents of the /source folder to a folder (ie. yourfolder) on your site via ftp ( with filezilla ) or any other upload service. You can then access your contents via http://yoursite.com/yourfolder.

Integrating in your project - top

In order to install this component in your html page you need to:

unpack the download package, open the source folder
copy the folder /audioplayer and the file ap.swf and publisher.php and dzsap-config.php into your project folder
open your html file and insert this inside your <head> tag

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="audioplayer/audioplayer.js" type="text/javascript"></script>
<link rel='stylesheet' type="text/css" href="audioplayer/audioplayer.css"/>

note: if you already have included jQuery in your document, do not include it again, jQuery should only be included once
insert this inside your <body> tag where you want the gallery to appear

<div id="ag1" class="audiogallery" style="opacity:0; padding-top: 70px;">
<div class="items">
<div class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-sourceogg="sounds/adg3.ogg">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
<div class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg"
data-scrubbg="img/scrubbg.png" data-scrubprog="img/scrubprog.png" data-videoTitle="Audio Video"
data-type="normal" data-source="sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/thumb2.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
</div>
</div>
insert this inside just before the ending of the </body>

<script>
jQuery(document).ready(function ($) {
var settings_ap = {
disable_volume: 'off'
,disable_scrub: 'default'
,design_skin: 'skin-wave'
,skinwave_dynamicwaves:'on'
};
dzsag_init('#ag1',{
'transition':'fade'
,'autoplay' : 'on'
,'settings_ap':settings_ap
});
});
</script>
All done!

Customise It - top

So let's explain the structure of the above so you can customize it to your needs.

The Item

<div id="ap1" class="audioplayer-tobe"
</div>

This is the item structure.

The Script Call

Note that bolded is the class of the zoomflow container. Options are explained below.

The Settings for the player

settings_skin

defines the plugin's skin - skin-default, skin-wave or skin-minimal

autoplay

defines if the audio should automatically play or not / on or off

swf_location

the location of the flash backup

swffull_location

the location of the flash backup apfull.swf

design_thumbh

the menu clip height

design_thumw

defines the thumb's width

skinwave_mode

choose the layout of skin-wave --- "normal" or "small" or "alternate"

skinwave_enableSpectrum

enable the spectrum vizualizer instead of static waves for skinwave ( default: off )

skinwave_enableReflect

enable a reflection for the waves ( default: off)

skinwave_comments_enable

enable the comments

skinwave_comments_retrievefromajax

retrieve the comments from the comments database

skinwave_comments_displayontime

display the comment when the scrub header is over it

google_analytics_send_play_event

if set to on it will deliver the play event to google analytics

The Settings for the gallery

transition

choose from fade or direct transition

autoplay

choose if the first item autoplays

autoplayNext

choose if the next item autoplays

disable_menu_navigation

disable the menu for navigation

settings_ap

input the audio player settings array ( like in the example ) no need to change this from the example

Customizations for - comments, footer player, views, likes

To make this easy to follow we have setuped a demo implementation here - ./source/index-footer-player-comments-views.html .

In this page we will have 3 similar players with 3 diffrent key features enabled.

linked to footer player- this player will play the track in a footer sticky player

comments enabled - this player has coments enabled

likes and views count enabled - this players has extra meta data underneath

How to link to footer player ?

First we need to setup the footer sticky player - tutorial here.

Once we done that then it's very easy - just add the attribute data-fakeplayer="#idoffooterplayer"

How to link to enable automatic waveform generation?

Skin-wave generates waveforms on runtime ( only first time the mp3 is run ) - so it is important to wait the first time running the mp3 to finish generating the wave. To make sure autosave is enabled and auto retrieving of waveform we need to :

make sure that settings_php_handler links to publisher.php or it's location
pcm_data_try_to_generate is set to on so that the pcm data saves on first load to be cached

Warning - if a id is set then the waveform will be linked to that id.

How to enable comments ?

Skin-wave allows time based comments. To enable it just

make sure that settings_php_handler links to publisher.php or it's location
skinwave_comments_enable is set to on
skinwave_comments_retrievefromajax is set to on so comments are automatically pulled from the database - if you have your own database, of crouse, this is not needed. and you can just populate the the-comments div with comments

Comments are saved in the same folder db/ commentsplayerid.html

This is how a comment looks like

<span class="dzstooltip-con" style="left:18.2883939038687%"><span class="dzstooltip arrow-from-start transition-slidein arrow-bottom skin-black" style="width: 250px;"><span class="the-comment-author">@razorflashmedia</span> says:<br />test</span><div class="the-avatar" style="background-image: url(https://secure.gravatar.com/avatar/12d1738b0f28c211e5fd5ae066e631a1?s=20)" /></span>

You can just add comments in the the-comments div if you wish to set them up manually

How to enable views / likes ?

ZoomSounds allows likes / views after the player

make sure that settings_php_handler links to publisher.php or it's location
the extra-html is inside the audioplayer-tobe - this is where you input any markup - and {{getviews}} and {{getlikes}} gets the count automatically via ajax

How to enable canvas waveforms ?

Canvas waveforms are the dynamic way of generating waveforms.

For these you will only need these set in player options.

,settings_php_handler:'publisher.php'
,pcm_data_try_to_generate:'on'
,skinwave_wave_mode: "canvas"

settings_php_handler -> this must point to publisher.php file, this will handle saving and retrieving pcm data for the waves

pcm_data_try_to_generate -> set this to on for retrieving pcm data on runtime

skinwave_wave_mode -> make sure this is set to canvas ( image is the old way of generating waveforms and is deprecated ) - default should be canvas

Other options for customizing the waveforms:

,skinwave_wave_mode_canvas_waves_number: 3 // -- the number of waveform bars ( set this to a high number like 200 for 200 waves, or to a small number like 3 for 3px waves )
,skinwave_wave_mode_canvas_reflection_size: "0.25" // -- the percent of the reflection
,skinwave_wave_mode_canvas_waves_padding: 1 // -- the spacing between waveforms

How to setup footer player

Just add this piece of code before the end of </body> tag

<div class="dzsap-sticktobottom-placeholder dzsap-sticktobottom-placeholder-for-skin-wave"></div>
<section class="dzsap-sticktobottom dzsap-sticktobottom-for-skin-wave">
<div id="ap1" class="audioplayer-tobe" style="width:100%; " data-thumb="img/thumb2.jpg" data-thumb_link="img/thumb.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-type="fake" data-source="fake" data-sourceogg="sounds/itsabeautifulday.ogg">

<div class="the-comments">
</div>
<div class="meta-artist"><span class="the-artist">Tim McMorris</span><span class="the-name"><a href="http://codecanyon.net/item/zoomsounds-wordpress-audio-player/6181433?ref=ZoomIt" target="_blank">It's a beautiful day</a></span>
</div>
</div>
</section>

</div>

<script>

jQuery(document).ready(function ($) {

var settings_ap = {
disable_volume: 'off'
,autoplay: 'off'
,cue: 'off'
,disable_scrub: 'default'
,design_skin: 'skin-wave'
,skinwave_dynamicwaves:'on'
,skinwave_enableSpectrum: "off"
,settings_backup_type:'full'
,settings_useflashplayer:'auto'
,skinwave_spectrummultiplier: '4'
,skinwave_comments_enable:'off'
,skinwave_mode: 'small'
};
dzsap_init('#ap1',settings_ap);
});
</script>

Choose any skin for the footer player ( skin-wave in this example ) - but the only one's optimized for footer are skin-silver and skin-wave.

How to add audio file for firefox/opera

Inside the audioplayer-tobe class you can add the data-source property which will have a .mp3 file (for opera,chrome, etc.) and also you can add the data-sourceogg property which will have an .ogg file (for firefox). See the example below:

<div id="ap1" class="audioplayer-tobe" style="width:100%;" data-thumb="img/m300.jpg" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-sourceogg="sounds/adg3.ogg">

How to change the plugin's skin

Below, we've setted up the skin-wave property. See the example below:

How to enable analytics for ZoomSounds play event

First of all you need to to include the analytics script.

If you don't already have installed - A simple and async method is to add this in your html

Remember to replace yourUAcode with your actual analytics code.

Then, you just need to enable the analytics collection for the desired audio player

dzsap_init("#apsimple", {

autoplay: "off"

,google_analytics_send_play_event: "on"

});

You'll be able to see your custom analytics in Behaviour > Events

How to setup in a Joomla 3.1 site

First, we need to copy the ZoomSounds files. So, create a folder in your joomla root named zoomsounds.
Copy the audioplayer/ and ap.swf and apfull.swf into the zoomsounds folder. And if you have a php server, publisher.php ( if you need comments, rates, likes or views ) and soundcloudretriever.php if you want SoundCloud sounds.
To embed on your site / in articles, you need to be able to post html code in your joomla site. As far as I know in Joomla 1.5, you were able to post html code with no restriction, but this seems to have changed in Joomla 3.1...
So first we need a plugin to allow us to post html content freely. I have tested the free version of this - http://www.nonumber.nl/extensions/sourcerer- and works fine so we will work with that. Download and activate it.
Go to your desired article and click edit. Now click Insert Code button. This is the code we need to insert:

<script src="http://yourjoomladir/zoomsounds/audioplayer/audioplayer.js" type="text/javascript"></script>
<link rel='stylesheet' type="text/css" href="http://yourjoomladir/zoomsounds/audioplayer/audioplayer.css"/>

<div id="ag1" class="audiogallery" style="opacity:0; padding-top: 70px;">
<div class="items">
<div class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-sourceogg="sounds/adg3.ogg">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
<div class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg"
data-scrubbg="img/scrubbg.png" data-scrubprog="img/scrubprog.png" data-videoTitle="Audio Video"
data-type="normal" data-source="sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/thumb2.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
</div>
</div>

<script>
jQuery(document).ready(function ($) {
var settings_ap = {
disable_volume: 'off'
,disable_scrub: 'default'
,design_skin: 'skin-wave'
,skinwave_dynamicwaves:'on'

,swf_location: 'http://yourjoomladir/zoomsounds/ap.swf'

,swffull_location: 'http://yourjoomladir/zoomsounds/apfull.swf'
};
dzsag_init('#ag1',{
'transition':'fade'
,'autoplay' : 'on'
,'settings_ap':settings_ap
});
});
</script>
Ofcourse, replace http://yourjoomladir/ with your joomla installation dir
To make sure Joomla does not strip any tags we need, we'll click the Toggle Tag Style button.
The final code should look like this
{source}
<script src="http://localhost/joomla/zoomsounds/audioplayer/audioplayer.js" type="text/javascript"></script>
<link rel='stylesheet' type="text/css" href="http://localhost/joomla/zoomsounds/audioplayer/audioplayer.css"/>
<div id="ag1" class="audiogallery" style="opacity:0; padding-top: 70px;">
<div class="items">
<div class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-sourceogg="sounds/adg3.ogg">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
<div class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg"
data-scrubbg="img/scrubbg.png" data-scrubprog="img/scrubprog.png" data-videoTitle="Audio Video"
data-type="normal" data-source="sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url('/joomla/img/thumb2.jpg')"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function ($) {
var settings_ap = {
disable_volume: 'off'
,disable_scrub: 'default'
,design_skin: 'skin-wave'
,skinwave_dynamicwaves:'on'
};
dzsag_init('#ag1',{
'transition':'fade'
,'autoplay' : 'on'
,'settings_ap':settings_ap
});
});
</script>
{/source}
Should work fine with your files.

How to set up a YouTube sound

as you observed in the source should be the youtube id of the video, this is usually in the link, followed by the ?v= attribute.

How to set up a SoundCloud sound

Observe:

<div id="apsc" data-type="soundcloud" class="audioplayer-tobe skin-default" data-type="normal" data-source="https://soundcloud.com/dubstep/stardust-by-james-egbert-schoolboy-ft-taylr-renee"></div>
<script>
jQuery(document).ready(function ($) {
dzsap_init("#apsc", {
autoplay: "off"
,soundcloud_apikey:""//insert api key here
});
});
</script>

So in the data-source attribute we have the full link to the sound. Also remember to put your SoundCloud API key in the soundcloud_apikey attribute. It will not work without it.

You can get one by going to http://soundcloud.com/you/apps/new and registering a new app. The api key wil lbe the client ID you get at the end.

Example - Simple 2 Sounds Gallery

Observe:

<div id="ag1" class="audiogallery" style="opacity:0; margin-top: 70px;">
<div class="items">
<div class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" >
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

<div class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg"
data-scrubbg="img/scrubbg.png" data-scrubprog="img/scrubprog.png" data-videoTitle="Audio Video"
data-type="normal" data-source="sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/thumb2.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

</div>
</div>

How to setup comments for the player

This is the example from index.html. It's a gallery with comments, likes, rates and plays enabled. The comments are stored and displayed from a database.

Note that comments are handled by the publisher.php ( you also need dzsap-config.php in the same path as publisher.php ) file. So you need this in the same folder as your project. If you need to have it in a different path, this is the setting like for the player.

,settings_php_handler: 'publisher.php' // -- the path of the publisher.php file, this is used to handle comments, likes etc.

Each database is in html form. The databases are stored in the db/ folder ( relative to the publisher.php ) and are named commentsap1.html where ap1 is the id of the player. So you see why id's are mandatory for each player.

I'll show you a two player gallery:

<div id="ap1" class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-thumb_link="img/adg3.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3">

<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</span>
</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

<div id="ap2" class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</span></div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/thumb2.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

</div>
</div>

How to setup comments for the gallery

This is the example from index.html. It's a gallery with comments, likes, rates and plays enabled. The comments are stored and displayed from a database.

Each database is in html form. The databases are stored in the db/ folder ( relative to the publisher.php ) and are named commentsap1.html where ap1 is the id of the player. So you see why id's are mandatory for each player.

I'll show you a two player gallery:

</div>
</div>

How to setup likes for the player

It's very easy. Remember the settings_ap ( settings for the audio player ) object ? We'll just insert this markup ( bolded )

var settings_ap = {
disable_volume: 'off'
,settings_extrahtml:'<div class="btn-like"><span class="the-icon"></span>Like</div><div class="star-rating-con"><div class="star-rating-bg"></div><div class="star-rating-set-clip" style="width: 96.6px;"><div class="star-rating-prog"></div></div><div class="star-rating-prog-clip"><div class="star-rating-prog"></div></div></div><div class="counter-hits"><span class="the-number">{{get_plays}}</span> plays</div><div class="counter-likes"><span class="the-number">{{get_likes}}</span> likes</div><div class="counter-rates"><span class="the-number">{{get_rates}}</span> rates</div>'
};

If you do want the counter for example, just remove the counter-likes div. The data is dynamic and the vars between {{var}} are replaced by the php ( publisher.php ) via ajax.

How to setup ratings for the player

It's very easy. Remember the settings_ap ( settings for the audio player ) object ? We'll just insert this markup ( bolded )

var settings_ap = {
disable_volume: 'off'
,settings_extrahtml:'<div class="btn-like"><span class="the-icon"></span>Like</div><div class="star-rating-con"><div class="star-rating-bg"></div><div class="star-rating-set-clip" style="width: 96.6px;"><div class="star-rating-prog"></div></div><div class="star-rating-prog-clip"><div class="star-rating-prog"></div></div></div><div class="counter-hits"><span class="the-number">{{get_plays}}</span> plays</div><div class="counter-likes"><span class="the-number">{{get_likes}}</span> likes</div><div class="counter-rates"><span class="the-number">{{get_rates}}</span> rates</div>'
};

If you do want the counter for example, just remove the counter-rates div. The data is dynamic and the vars between {{var}} are replaced by the php ( publisher.php ) via ajax.

How to setup the gallery with background changing

There is an example - index.html .

<div id="ap1" class="audioplayer-tobe" style="width:100%; " data-thumb="img/adg3.jpg" data-thumb_link="img/adg3.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-bgimage="img/bg.jpg">

<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</span>
</div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/adg3.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

<div id="ap2" class="audioplayer-tobe" data-bgimage="img/bg2.jpg" style="width:100%; " data-thumb="img/thumb2.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-videoTitle="Audio Video" data-type="normal" data-source="sounds/adg3.mp3" data-bgimage="img/bg2.jpg">
<div class="meta-artist"><span class="the-artist">Mick Jagger</span><br/><span class="the-name">Revenge</span></div>
<div class="menu-description">
<div class="menu-item-thumb-con"><div class="menu-item-thumb" style="background-image: url(img/thumb2.jpg)"></div></div>
<span class="the-artist">Mick Jagger</span>
<span class="the-name">Revenge</span>
</div>
</div>

</div>
</div>

The key is to have the gallery wrapped in a ap-wrapper div. Then on the items that you want to change the background, you just apply the data-bgimage attribute.

How to setup the gallery pinned to bottom

<div class="dzsap-sticktobottom-placeholder"></div>
<section class="dzsap-sticktobottom">
<div id="ap1" class="audioplayer-tobe" style="width:100%; margin-top:40px; margin-bottom: 40px;" data-thumb="img/thumb.jpg" data-thumb_link="img/thumb.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-type="normal" data-source="sounds/itsabeautifulday.mp3">
<div class="the-comments">
</div>
<div class="meta-artist"><span class="the-artist">Tim McMorris</span><br/><span class="the-name"><a href="http://codecanyon.net/item/zoomsounds-wordpress-audio-player/6181433?ref=ZoomIt" target="_blank">It's a beautiful day</a></span>
</div>
</div>
</section>

var settings_ap = {
disable_volume: 'off'
,disable_scrub: 'default'
,design_skin: 'skin-wave'
,skinwave_dynamicwaves:'on'
,skinwave_enableSpectrum: "off"
,settings_backup_type:'full'
,settings_useflashplayer:'auto'
,skinwave_spectrummultiplier: '4'
,skinwave_comments_enable:'off'
,skinwave_mode: 'small'
};
dzsap_init('#ap1',settings_ap);
});
</script>

Just add this at the bottom of your document ( before the </body> ends )

How to setup a play button for a different player

If you are looking at this example - http://goo.gl/D1F9uR ( stick to bottom ) you will notice that there are play buttons that change the media of the main player. We do this by this format. You will notice that this is the normal audioplayer attributes + the data-target attribute which targets the player's id you want to change media for.

<div class="audioplayer-song-changer" data-target="#ap1" href="#" style="" data-thumb="img/adg3.jpg" data-thumb_link="img/thumb.jpg" data-bgimage="img/bg.jpg" data-scrubbg="waves/scrubbg.png" data-scrubprog="waves/scrubprog.png" data-type="normal" data-source="sounds/adg3.mp3" data-sourceogg="sounds/itsabeautifulday.ogg">change song <span class="meta-artist"><span class="the-artist">Adrien Gardiner</span><span class="the-name"><a href="http://codecanyon.net/item/zoomsounds-wordpress-audio-player/6181433?ref=ZoomIt" target="_blank">Eco the Boost</a></span> </span> </div>

FAQ - top

What's the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

How should I modify the player css ?

If you want to modify some styling, the best way is to have a separate css file ( plugin-child.css for example ) and apply your modifications there and not directly in the plugin css. This way, modifications will be retained through updates.

How to modify buttons color

You can change it via css

.audioplayer .player-but .the-icon-bg, .audioplayer .playbtn .the-icon-bg , .audioplayer .pausebtn .the-icon-bg, .audioplayer.skin-wave .ap-controls .scrubbar .scrubBox-hover { background-color: #dcd18f!important;}
.audioplayer .meta-artist .the-artist { color: #dcd18f!important;}

How to include the player in WordPress / Blogger / other CMS ?

Method 1

You can include the scrips like this.

Then if you have access to a HTML editor ( like WordPress has - Visual Editor and Text Editor ) just input something like this ( you can customize it how you wish )

<div id="apsimple" class="audioplayer-tobe" style="width:100%; margin-top:0;" data-videoTitle="Audio Video" data-type="normal" data-source="../../source/sounds/adg3.mp3">
<div class="meta-artist"><span class="the-artist">Tim McMorris</span> - It's a beautiful day</div>
</div>
<script>
jQuery(document).ready(function ($) {
dzsap_init("#apsimple", {
autoplay: "off"
});
});
</script>

Advantages: you have access to every variable that the player uses - song, autoplay etc.

Disadvantages: Harder to implement. Some CMSs might not have access to a editor where it's allowed to input html content

Method 2

You can make a html page with the required scripts and styles - you have example in examples/basic

You can just upload that somewhere on your server.

Advantages: simple implementation

Disadvantages: least flexibility - in order to edit variables like song name, autoplay etc. you need to edit the html

Developer Tips - top

API Functions - For Gallery

The audiogallery item has a assigned id. You can use that ID to give

document.getElementById("agid").api_goto_next();

Other Functions

api_goto_next

go to next song in playlist

api_goto_prev

go to previous song in playlist

api_goto_item

go to certain playlist item ( api_goto_item(2) - plays the third item )

api_handleResize

refresh the gallery dimensions and realign

API Functions - For Player

The audioplayer item has a assigned id.

<div data-thumb="img/adg3.jpg" id="apid" data-type="audio" class="audioplayer-tobe skin-silver " data-source="sounds/adg3.mp3" data-scrubbg="wavesbg.png" data-scrubprog="wavesprog.png">
<div class="meta-artist">
<span class="the-artist">Mick Jagger - Revenge</span><span class="the-name"><a href="#">Buy now!</a></span>
</div>
</div>

You can use that ID to give API instructions to the player like so

document.getElementById("apid").api_pause_media();

Other Functions

api_destroy

kill the player's listeners and events

api_play / api_play_media

play the media

api_pause_media

pause the media

api_pause_media_visual / api_play_media_visual

the location of the flash backup apfull.swf

api_change_media

change media source for the player / change_media("song.mp3", {type:"audio", fakeplayer_is_feeder:"off"});

api_seek_to_perc

seek to percentage api_seek_to_perc(0.5) for the half of the song

Recommended Programs

You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:

.html / .css- Dreamweaver CS5
.js - Aptana Studio3.0
.scss - Netbeans with SASS plugin

SASS

If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer's life easier. This is optional but if you want to try it here is the site.

Waveform Generator * DEPRECATED

The waveform generator can be included in any php tool / cms. While we don't offer support for this type of customization, we made a picture to explain the different parameters that can be customized.

Digital Zoom Studio

Go To Table of Contents