Home / Premium Pro Plugins / ZoomSounds – neat HTML5 Audio Player

ZoomSounds – neat HTML5 Audio Player

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)


best selling wave player

Audio Participant Intro

Need a nifty, cutting-edge, retina-ready, html5 audio participant to your web site ? ZoomSounds is the proper candidate. With three skins to suit each model, just one format required to operate, ZoomSounds

WP Model

Audio Participant Options

  • HTML5 expertise – this gallery makes use of the newest html5 tehniques to ship a by no means seen earlier than expertise to your shoppers
  • totally responsive – appears nice from cell to HD
  • flash backup – ie7 and ie8 don’t help html5, however these customers usually are not forgetten, the sounds will play for them too through the flash participant
  • one obligatory format – the arduous half is completed by the participant script to ensure that the consumer to have straightforward expertise enhancing – solely mp3 is required
  • contact optimized – contact units usually are not forgotten
  • 5 skins – for each want
  • three skins – three full skins to suit each model
  • CSS3 expertise – this participant makes use of cutting-edge css3 definitions
  • straightforward set up – buy, obtain the zip, learn the docs
  • iPhone / iPad optimized – this gallery has been optimized for Apple contact units
  • Android optimized – this element has been examined on Android four.zero and works superior
  • developer / SASS powered – this element’s CSS has been constructed on high of SASS which implies SASS customers could have a simple time modifying the skins. For non-SASS customers it’s no downside both as a result of CSS information ( generated by SASS ) are supplied
  • performs from YouTube – streams YouTube audio
  • performs from SoundCloud – streams SoundCloud audio with an API key
  • 100% css skinable – need to make slight modifications to the skins ? The skins are 100% constructed from the css and it is rather straightforward to edit with css data
  • search engine optimisation pleasant – constructed with SEO on thoughts from the bottom up, the Testimonial Rotator makes use of non hidden legitimate html markup to construct the widget
  • suitable with all main browsers, together with IE – suitable from IE7 to IE10, Chrome, Safari and Firefox

Cellular Optimized

Easy on mobiles too due to
acceleration. Android four.four+ Chrome
and iOS testedto ship tremendous easy

Watch Video

Audio Participant Updates

UPDATE 2.71 [ 09/27/2016 ]

  • [TWEAK] redesigned most buttons
  • [TWEAK] up to date preview

UPDATE 2.70 [ 07/21/2016 ]

  • [ADD] new wave visualization technique ( skinwave_wave_mode: “canvas” )

UPDATE 2.67 [ 07/09/2016 ]

  • [TWEAK] now taking part in deciding on different tracks from the gallery retains the present taking part in observe quantity

UPDATE 2.65 [ 05/19/2016 ]

  • [TWEAK] up to date preview
  • [ADD] index-sticktobottom-Three.html – grid Three instance

UPDATE 2.64 [ 05/19/2016 ]

  • [FIX] google analytics for play occasion now works with the latest model of analytics.js
  • [ADD] index-analytics.html – instance on methods to use analytics for play occasion

UPDATE 2.63 [ 05/11/2016 ]

  • [FIX] bugs

UPDATE 2.62 [ 04/07/2016 ]

  • [ADD] instance on methods to play personal soundcloud observe through api
  • [ADD] load metadata occasion
  • [FIX] not taking part in on cell units streaming from community information

UPDATE 2.01 [ 09/07/2015 ]

  • [FIX] varied fixes

UPDATE 2.00 [ 01/20/2015 ]

  • [ADD] added skin-aria
  • [ADD] added enable_easing choice on the menu motion
  • [ADD] added google analytics occasion for play
  • [ADD] choice for altering the track in a participant ( + API name )
  • [ADD] gallery pores and skin – skin-default or skin-wave
  • [TWEAK] modified pores and skin wave mode slick format from absolute to relative

UPDATE 1.62 [ 07/03/2014 ]

  • [FIX] autoplayNext compelled autoplay to on

UPDATE 1.50 [ 04/02/2014 ]

  • [ADD] skin-pro
  • [TWEAK] up to date preview
  • [FIX] some bugs in Safari

UPDATE 1.40 [ 01/15/2014 ]

  • [ADD] now feedback can seem when the scrub head is over it
  • [ADD] skin-justthumbandbutton
  • [ADD] new persist with backside mode
  • [ADD] new slick mode for skin-wave
  • [TWEAK] up to date preview
  • [FIX] some bugs

UPDATE 1.10 [ 06/06/2013 ]

  • [add] all new flash generator for the waveforms [ the old html5 had some compatibility issues ]
  • [fix] compatibility points

Audio Participant Further Options

Absolutely Customizable.

You’ll be able to disable scrubbar, quantity controls, fullscreen controls thumbnail and extra. You’ll be able to customise all colours through CSS. The participant on the left makes use of the second pores and skin of the participant. The primary pores and skin being the sound wave pores and skin on the high.

Retina Prepared.

Every pores and skin is totally responsive and retina-ready. Wow. The participant itself has been examined on all main browsers, Firefox, Chrome, Opera, Safari, IE7-10. And optimized for the iOS and Android cell platforms.

Minimal Participant.

Generally extra is much less, and this participant has each situation lined. This in the suitable is the illustration of the third pores and skin of the participant, a minimal implementation which even has scrub controls ( for those who click on on the margins ).

Solely One Format.

Todays html5 audio gamers require the world in several audio codecs. However not this one. Solely mp3 is required and ogg is optionally available.


You’ll be able to place as many gamers on a web page as you want. If one other participant is taking part in and also you click on on a unique one, the opposite participant will cease taking part in, simply attempt in right here.

A number of Sources.

Self hosted audios usually are not your solely choice. It’s also possible to play streams from YouTube or SoundCloud, and even Shoutcast radio stations*

* ( for Shoutcast ) – You should first verify if the stream is audio/mpeg. Let’s take for instance http://streamplus40.leonex.de:41364/for those who open this in a browser you will note that Content material Sort: audio/mpeg

Waveform Generator

With New Canvas Mode – After mp3 is loaded, the waveform will likely be generated mechanically – this may occur solely as soon as after which will likely be saved into the database – so additional playings of the mp3 will learn from the saved generated waveform immediately


With Previous ( Deprecated ) Picture Mode:

  • generate waveforms with an admin panel ( waveformgenerator.php ) – on which you’ll change colour, multiplier, observe locatinon and so forth / flash primarily based

  • generate waveforms for all of the mp3s in a folder ( wavegeneratorfromdir.php ) / flash primarily based
  • generate waveform for track.mp3 to wavesbg.png and wavesprog.png – static ( waveform.html ) – you’ll be able to edit that html for various colours, names / flash primarily based
  • waveformgenerator_html/ for utilizing the html5 waveform generator / html5 primarily based , I don’t help this in the mean time

Presentation for the primary two technique – https://youtu.be/WrTSB54oTkI


  • tracks and pictures usually are not included within the obtain package deal.
  • to make use of commenting system you have to php server
  • youtube is not going to work as audio on iDevices however as a video as a result of platform limitations
  • waveform will likely be generated mechanically, however it should want a php server for the saving characteristic


Within the smaller participant (the round participant on the suitable hand aspect of your demo web page) I would love to have the ability to make the entire participant bigger. As an alternative of 100px / 100px I would love 500px/ 500px. The place do I modify this? I’ve edited the canvas but it surely has gone smaller!

Simply edit the 100 width and 100 top on this piece of code and you have to be alright ( line ~377 )

_conPlayPause.kids('.playbtn').append('<canvas width="100" top="100" class="playbtn-canvas"/>');
                    skin_minimal_canvasplay = _conPlayPause.discover('.playbtn-canvas').eq(zero).get(zero);
                    _conPlayPause.kids('.pausebtn').append('<canvas width="100" top="100" class="pausebtn-canvas"/>');
can this/does this bind to the <audio> tags?

There is no such thing as a option to bind to the audio tag

It would create an audio tag by it’s personal

however I feel the format is pretty straightforward

<div id="apsimple" class="audioplayer-tobe" fashion="width:100%; margin-top:zero;" data-videotitle="Audio Video" data-type="regular" data-source="./sounds/adg3.mp3">
    <div class="meta-artist"><span class="the-artist">Tim McMorris</span> - It is a lovely day</div>
    jQuery(doc).prepared(operate ($) 

            autoplay: "off" 
is there a option to settle for MPEG file format audio-only?

you’ll be able to have solely .mp3 because the stream like the instance above and it’ll use the Flash Backup for unsupported browser


  • stunning tracks by timmcmorris and ADG3studios
  • wavesurfer for wave pcm information

Different Superior Merchandise


Check Also


Love Calculator

DOWNLOAD Love calculator is a enjoyable software the place buddies and can calculate the share ...


Instadraw – Android Drawing App Template

DOWNLOAD Instadraw – Android Drawing App Template This app has fantastically crafted easy & minimalist ...