Discussion on ZoomSounds - neat HTML5 Audio Player


ZoomIt supports this item


This author's response time can be up to 2 business days.

198 comments found.

Want to buy. Prompt, the player will work with https://the-fasol.com/page.php?id=98053 (http://www.zippyshare.com)


The player will work with links to mp3 files . In this case it’s – http://www5.zippyshare.com/downloadMusic?key=Ogw3jPdJ


thank you in the near future will make an order

Where can I find the full setting options for player? For eg. I can see this option “preload_method: ‘metadata’” inside the script but can’t find it inside “Read Me” file.


design_skin: ‘skin-default’ //—the skin of the player – can be set from the html as well

autoplay: ‘off’ //—autoplay the track ( only works is cue is set to “on”

cue: ‘on’ // this chooses wheter “on” or not “off” a part .. what part is decided by the preload_method below

preload_method: ‘metadata’ //—“none” or “metadata” or “auto” ( whole track )

loop: ‘off’ //—loop the track

swf_location: “ap.swf” //—the location of the flash backup

swffull_location: “apfull.swf” //—the location of the flash backup

settings_backup_type: ‘light’ // == light or full

settings_extrahtml: '' // -- some extra html - can be rates



settings_extrahtml_in_float_left: '' // -- some extra html that you may want to add inside the player

to the right

settings_extrahtml_in_float_right: '' // -- some extra html that you may want to add inside the player

to the right

settings_extrahtml_before_play_pause: '' // -- some extra html that you may want before play button

settings_extrahtml_after_play_pause: '' // -- some extra html that you may want after play button

settings_trigger_resize: '0' // -- check the player dimensions every x milli seconds

design_thumbh: "default" //thumbnail size

design_thumbw: "200" // -- thumb width

disable_volume: 'default'

disable_scrub: 'default'

disable_player_navigation: 'off'

disable_timer: 'default' // -- disable timer display

type: 'audio'

enable_embed_button: 'off' // -- enable the embed button

embed_code: '' // -- embed code

skinwave_dynamicwaves: 'off' // -- dynamic scale based on volume for no spectrum wave

soundcloud_apikey: '' // -- set the sound cloud api key

parentgallery: null // -- the parent gallery of the player

skinwave_enableSpectrum: 'off' // off or on

skinwave_enableReflect: 'on' // -- (deprecated)

skinwave_place_thumb_after_volume: 'off' // -- place the thumbnail after volume button

skinwave_place_metaartist_after_volume: 'off' // -- place metaartist after volume button

settings_useflashplayer: 'auto' // off or on or auto

skinwave_spectrummultiplier: '1' // -- (deprecated) number

settings_php_handler: '' // -- the path of the publisher.php file

this is used to handle comments

likes etc.

php_retriever: 'soundcloudretriever.php' // -- the soundcloud php file used to render soundcloud files

skinwave_mode: 'normal' // - "normal" or "small"

skinwave_wave_mode: 'canvas' // - "normal" or "canvas"

skinwave_wave_mode_canvas_waves_number: '3' // - the number of waves in the canvas

skinwave_wave_mode_canvas_waves_padding: '1' // - padding between waves

skinwave_wave_mode_canvas_reflection_size: '0.25' // - the reflection size

change_media_animate_skinwave_mode_small: 'off' // - the reflection size

pcm_data_try_to_generate: 'off' // - try to find out the pcm data and sent it via ajax ( maybe send it via php_handler

skinwave_comments_links_to: '' // -- clicking the comments bar will lead to this link ( optional )

skinwave_comments_enable: 'off' // -- enable the comments

publisher.php must be in the same folder as this html

skinwave_comments_playerid: ''

skinwave_comments_account: 'none'

skinwave_comments_process_in_php: 'on' // -- select wheter the comment text should be processed in javascript "off" / or in php

later "on"

skinwave_comments_retrievefromajax: 'off' // - retrieve the comment form ajax

skinwave_preloader_code: 'default' // - retrieve the comment form ajax

skinwave_comments_displayontime: 'on' // - display the comment when the scrub header is over it

skinwave_comments_avatar: 'http://www.gravatar.com/avatar/00000000000000000000000000000000?s=20' // -- default image

skinwave_comments_allow_post_if_not_logged_in: 'on' // -- allow posting in comments section if not looged in

skinwave_timer_static: 'off'

default_volume: 'default' // -- number / set the default volume 0-1 or "last" for the last known volume

volume_from_gallery: '' // -- the volume set from the gallery item select

leave blank if the player is not called from the gallery

design_menu_show_player_state_button: 'off' // -- show a button that allows to hide or show the menu

playfrom: 'off' //off or specific number of settings or set to "last"

scrubbar_tweak_overflow_hidden: 'off' // -- replace overflow hidden that is used for with a

design_animateplaypause: 'default'

embedded: 'off' // // -- if embedded in a iframe

embedded_iframe_id: '' // // -- if embedded in a iframe

specify the iframe id here

sample_time_start: '0' // - if this is a sample to a complete song

you can write here start times

if not

leave to 0.

sample_time_end: '0' // -- if this is a sample to a complete song

you can write here start times

if not

leave to 0.

sample_time_total: '0' // -- if this is a sample to a complete song

you can write here start times

if not

leave to 0.

google_analytics_send_play_event: 'off' // -- send the play event to google analytics

you need to have google analytics script already on your page

fakeplayer: null // -- if this is a fake player

it will feed

failsafe_repair_media_element: '' // -- some scripts might effect the media element used by zoomsounds

this is how we replace the media element in a certain time

action_audio_play: null // -- set a outer play function ( for example for tracking your analytics )

action_audio_play2: null // -- set a outer play function ( for example for tracking your analytics )

action_audio_end: null // -- set a outer ended function ( for example for tracking your analytics )

action_audio_comment: null // -- set a outer commented function ( for example for tracking your analytics )

action_audio_loaded_metadata: null // -- set a outer commented function ( for example for tracking your analytics )

type_audio_stop_buffer_on_unfocus: 'off' // -- if set to on

when the audio player goes out of focus

it will unbuffer the file so that it will not load anymore

useful if you want to stop buffer on large files

construct_player_list_for_sync: 'off' // -- construct a player list from the page that features single players playing one after another. searches for the .is-single-player class in the DOM

settings_exclude_from_list: 'off' // -- a audioplayer list is formed at runtime so that when

design_wave_color_bg: '222222' // -- waveform background color.. 000000

ffffff gradient is allowed

design_wave_color_progress: 'ea8c52' // -- waveform progress color


Hi, thanks for replying my previous question.

How can I add the fixed bottom player like this https://0.s3.envato.com/files/206821841/index-sticktobottom.html?

Thanks a lot.


Example can be found in source/index-sticktobottom-2.html



jb0117 Purchased

is there anyway way to incorporate wave lock so your mobile device doesn’t go to sleep while your listening? i’ve been trying to figure it out with no success; you’re away more advance coder then me, maybe you’ll have luck. firefox 49.0 fixes the MP3 time length bug, so everything is working correctly now.


jb0117 Purchased

I found a work around, but autoplay doesn’t work.. how can i link the play button of the audio script to also trigger this blank video clip that is on repeat.. <video id=”video” width=”1” height=”1” controls autoplay loop mute> <source src=”/data/repeater.mp4” type=”video/mp4”> </video>

“controls” is on there to see if it triggers, once i get it working it will be removed; this will keep the phone from sleeping.. your help is appreciated..


Search for source / index-api_example_play.html

You’ll have example there on how to attach a function that can do anything to a play event on the zoomsounds player.

But not sure that you can play a video from the api on mobile due to security restrictions but it does not hurt to try.


Good afternoon!

I ask you to help sort out the problem. We connect you bought the player (https://the-fasol.com/page.php?id=12095), and it generates a wave that the structure is not suitable for music composition. Upgrading is always a new wave page. There may use this cloth player and receive a wave corresponds to a musical composition. Sample results which we would like to achieve – https://soundcloud.com/ulrick-junior-dutervil


Waveform will be generated on first track play and will be saved. Waveform will be identical only for 2 identical tracks.

Also that link points to the main demo ( check it )


(https://the-fasol.com/page.php?id=100) That’s what happens. Every time you refresh the page, then the wave is changed. Please help! We are willing to pay for the help


You need to enable pcm_data_try_to_generate to on

so replace

,pcm_data_try_to_generate: "on" 


How can i create youtube audio playlist? When i create a playlist if songs are from youtube i, songs are playing but play and stop button don’t working. I want to create a good youtube audio list.If data-type normal everything is good but when i change data-type normal to youtube playlist does not working.

Hello again. I created one playlist on my website http://ucretsizmuzikindir.com/maho/ . It’s pause button is doesn’t working. Also i want to add next button and prev button close to pause button. And i want to stick it on footer. How can i do this?


Submitted update for this bug

You can download updated files tomorrow and replace the audioplayer/ folder

I made example youtube source in source/index-player-onlyone.html

for footer players you can check index-sticktobottom.html examples


Can you help me with getting the media player setup on my wordpress site?

The URL is thirteenband.com


Seems you have wordpress site ?

We have wordpress plugin for that


Is this generating waveform after mp3 fully loaded !? if not , is it possible to generate waveforms serverside ?


After mp3 is loaded, the waveform will be generated automatically – this will happen only once and then will be saved into the database – so further playings of the mp3 will read from the saved generated waveform instantly


Good afternoon!

Tell me, please, where you want to embroil – Purchase codes? Why is it needed?


What does embroil mean ? I don’t understand


How to get the play button/metadata UP the player and not down the player?


add the class alternate-layout to the audioplayer div


Thank you! And where i can edit CSS? Because if i edit SCSS i can’t see the update on the webpage!



How can I disable auto pre load?


I found it, thank you

For gallery there is option in the admin

for single player – I believe cue attribute of the shortcode

Also there is preload_method in the audio player configurations – only metadata / full track



I have integrated the zoom player in a joomla base site and everything is running great, i am using the bottom fullwidd player.

The only issue i am facing is that the pause button in the bottom fullwid player in not showing up, i have checked the css and code with firefox developer/inspector but cant find the issue, do you have any inputs ?

Good job!

Can you show me a link ?


Hello, I have big interest to buy your product, but I need first to know is we are depending of an external website to create the waveform ? We need to install something like laamencoder on the apache server ? Or maybee the waveform is generated from another website ? Best regards


Waveform is created on first play, and is saved via php ( so you just need only php on your server ) – no extension, no external server


Hello! great product. Please i have a question before continuing with purchase. I’m creating a music sharing site like soundcloud. I want to find out if the player is able to play songs from links that are uploaded by users and are stored in my apps database in the cloud. Such that i could load the links of their songs from the database into the player and it plays it for them in their browsers(just like soundcloud). Thanks for your time, hope to hear from you soon.


Yes, it can play soundcloud songs from their link

We have solution for portal also – http://zoomthe.me/soundportal/

Hi Looking at the mp3 file on WordPress Dashboard > Media > Library > mp3 file chosen, Can’t see the waveforms settings options.


Please comment from the account you purchased

Hi Idid purchase from that account. Item Purchase Code (last 12 digits): xxxxxxxx-xxxx-xxxx-xxxx-97e7c628ca4e

How do I know if an audio is played or play button is clicked. Basically I just want to track the number of play times in Database. Is there any option to set the tracking?


Check source/index-default.html

Basically you need to include

in your audioplayer settings

and to display the number of comments just add this option in audio player settings

,settings_extrahtml:'<div class="float-left "> <span class=" btn-zoomsounds btn-like"><span class="the-icon">{{heart_svg}}</span><span class="the-label hide-on-active">Like</span><span class="the-label show-on-active">Liked</span></span>                 <span class=" btn-zoomsounds btn-embed dzstooltip-con "> <span class="dzstooltip transition-slidein arrow-bottom align-left skin-black " style="width: 350px; "><span style="max-height: 150px; overflow:hidden; display: block; white-space: normal; font-weight: normal">{{embed_code}}</span> <span class="copy-embed-code-btn">Copy Embed</span></span> <span class="the-icon"><i class="fa fa-share" /></span><span class="the-label ">Embed</span>  </span>                 <span class=" btn-zoomsounds btn-itunes "><span class="the-icon"><i class="fa fa-apple" /></span><span class="the-label ">iTunes</span></span> </div>            <div class="counter-hits"><i class="fa fa-play" /><span class="the-number">{{get_plays}}</span></div><div class="counter-likes"><i class="fa fa-heart" /><span class="the-number">{{get_likes}}</span></div>'

Does it mean that publisher.php will be called when the audio is played? In that case can I replace it with another php page? eg. ,settings_php_handler:’tracking.php?id=1’

If you write your own tracking code why not .. But publisher.php currently handles saving views and getting views

Better to append your code in publisher.php functions


tommek111 Purchased

You mentioned earlier that the waveform can be created on the first play. Where will the new waveform stored? In the same folder as the audio file or can you specify it? What about ‘data-scrubbg’ and ‘data-scrubprog’ if you want waveforms to be created on the first play? Can you avoid them or should you spacify them? Can you give any example for it, please?

If you charge the users for using the player and not redistributing the player source code then it’s ok regular licence


tommek111 Purchased

That’s correct. Thank you. When do you plan to issue an update?

If you want the latest update – you can send me a PM

We are working on version 3.00 but it might be ready until later this week -> will have a few new layouts and a much nicer live spectrum analyzer display and the buttons have been reworked


sounl Purchased

I found a problem in in the demo here, the playlist version, both the “next song” and “previous song” buttons go to only the previous song. (Tested in Chrome\Safari\IE and iphone ios10)

Thanks – we will update

If you have problems on your install you can send us mail for the latest update