Audio Player Intro
Want a nifty, cutting-edge, retina-ready, responsive html5 audio player for your site ? ZoomSounds is the perfect candidate. With three skins to fit every brand, only one format required to function, ZoomSounds
WordPress Version
Audio Player 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
five skins – for every need
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
plays from SoundCloud – streams SoundCloud audio with an API key
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
Mobile Optimized
Smooth on mobiles too because of
hardware acceleration. Android 4.4+ Chrome
and iOS testedto deliver super smooth
experience
Watch Video
Audio Player Updates
If you have updated html files and have your own project, you only need to update audioplayer/audioplayer.css and audioplayer/audioplayer.js and maybe publisher.php – for the update to apply
UPDATE 4.26 [ 02/20/2018 ]
[FIX] publisher.php not saving waveforms
UPDATE 4.25 [ 02/16/2018 ]
[FIX] some bugs
UPDATE 4.24 [ 01/21/2018 ]
[FIX] some bugs
UPDATE 2.73 [ 11/07/2017 ]
[FIX] some bugs
[FIX] some youtube bugs with play resolved
UPDATE 2.72 [ 10/16/2017 ]
[TWEAK] redesigned skin-minimal
[TWEAK] reworked some calculation of current time / total time
[ADD] gapless play feature – play songs in a playlist without interruption, the track that is supposed to come next will preload 10 seconds previous to it’s turn, so it can start right away
UPDATE 2.71 [ 09/27/2016 ]
[TWEAK] redesigned most buttons
[TWEAK] updated preview
UPDATE 2.70 [ 07/21/2016 ]
[ADD] new wave visualization method ( skinwave_wave_mode: “canvas” )
UPDATE 2.67 [ 07/09/2016 ]
[TWEAK] now playing selecting other tracks from the gallery keeps the current playing track volume
UPDATE 2.65 [ 05/19/2016 ]
[TWEAK] updated preview
[ADD] index-sticktobottom-3.html – grid 3 example
UPDATE 2.64 [ 05/19/2016 ]
[FIX] google analytics for play event now works with the newest version of analytics.js
[ADD] index-analytics.html – example on how to use analytics for play event
UPDATE 2.63 [ 05/11/2016 ]
[FIX] bugs
UPDATE 2.62 [ 04/07/2016 ]
[ADD] example on how to play private soundcloud track via api
[ADD] load metadata event
[FIX] not playing on mobile devices streaming from network data
UPDATE 2.01 [ 09/07/2015 ]
[FIX] various fixes
UPDATE 2.00 [ 01/20/2015 ]
[ADD] added skin-aria
[ADD] added enable_easing option on the menu movement
[ADD] added google analytics event for play
[ADD] option for changing the song in a player ( + API call )
[ADD] gallery skin – skin-default or skin-wave
[TWEAK] changed skin wave mode slick layout from absolute to relative
UPDATE 1.62 [ 07/03/2014 ]
[FIX] autoplayNext forced autoplay to on
UPDATE 1.50 [ 04/02/2014 ]
[ADD] skin-pro
[TWEAK] updated preview
[FIX] some bugs in Safari
UPDATE 1.40 [ 01/15/2014 ]
[ADD] now comments can appear when the scrub head is over it
[ADD] skin-justthumbandbutton
[ADD] new stick to bottom mode
[ADD] new slick mode for skin-wave
[TWEAK] updated 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 issues
Audio Player Extra Features
Fully Customizable.
You can disable scrubbar, volume controls, fullscreen controls thumbnail and more. You can customize all colors via CSS. The player on the left uses the second skin of the player. The first skin being the sound wave skin at the top.
Retina Ready.
Each skin is fully responsive and retina-ready. Wow. The player itself has been tested on all major browsers, Firefox, Chrome, Opera, Safari, IE7-10. And optimized for the iOS and Android mobile platforms.
Minimal Player.
Sometimes more is less, and this player has every scenario covered. This in the right is the representation of the third skin of the player, a minimal implementation which even has scrub controls ( if you click on the margins ).
Only One Format.
Todays html5 audio players require the world in different audio formats. But not this one. Only mp3 is required and ogg is optional.
Smart.
You can place as many players on a page as you wish. If another player is playing and you click on a different one, the other player will stop playing, just try in here.
Multiple Sources.
Self hosted audios are not your only option. You can also play streams from SoundCloud, or even Shoutcast radio stations*
* ( for Shoutcast ) – You must first check if the stream is audio/mpeg. Let’s take for example http://streamplus40.leonex.de:41364/if you open this in a browser you will see that Content Type: audio/mpeg
Waveform Generator
With New Canvas Mode – 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
__
With Old ( Deprecated ) Image Mode:
generate waveforms with an admin panel ( waveformgenerator.php ) – on which you can change color, multiplier, track locatinon etc / flash based
generate waveforms for all the mp3s in a folder ( wavegeneratorfromdir.php ) / flash based
generate waveform for song.mp3 to wavesbg.png and wavesprog.png – static ( waveform.html ) – you can edit that html for different colors, names / flash based
waveformgenerator_html/ for using the html5 waveform generator / html5 based , I do not support this at the moment
Presentation for the first two method – https://youtu.be/WrTSB54oTkI
Notes
tracks and images are not included in the download package.
to use commenting system you will need php server
youtube will not work as audio on iDevices but as a video due to the platform limitations
waveform will be generated automatically, but it will need a php server for the saving feature
FAQ
In the smaller player (the circular player on the right hand side of your demo page) I would like to be able to make the whole player larger. Instead of 100px / 100px I would like 500px/ 500px. Where do I change this? I’ve edited the canvas but it has gone smaller!
Just edit the 100 width and 100 height in this piece of code and you should be alright ( line ~377 )
_conPlayPause.children('.playbtn').append('');
skin_minimal_canvasplay = _conPlayPause.find('.playbtn-canvas').eq(0).get(0);
_conPlayPause.children('.pausebtn').append('');
can this/does this bind to the