ZoomSounds - neat HTML5 Audio Player

Last Update

7 June 2013

Regular License

$8

Extended License

$40

Sales

154

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 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

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 YouTube – streams YouTube audio 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

Audio Player Updates 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 YouTube or SoundCloud.

Notes

tracks and images are not included in the download package.

the waveform is a static image it is not auto generated by the audio player, but by a tool included in the download package. full instructions are provided on how to do this and it’s 30 second job for each track.

Audio Player Updates For updating, disable and delete the previous version, and install the new downloaded one. Or (recommended ) just unpack the zip you get from the download and overwrite the previous folder from wp-content/plugins/ via ftp UPDATE 1.10 [ 04/17/2013 ]

[fix] mp3 now play fine in firefox

[add] automatic soundcloud wave generation for soundcloud type

[tweak] other fixes and performance upgrades

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('<canvas width="100" height="100" class="playbtn-canvas"/>'); skin_minimal_canvasplay = _conPlayPause.find('.playbtn-canvas').eq(0).get(0); _conPlayPause.children('.pausebtn').append('<canvas width="100" height="100" class="pausebtn-canvas"/>');

Credits

beautiful tracks by timmcmorris and ADG3studios

wavesurfer and canvas2image

Other Awesome Products