ZoomSounds – Neat HTML5 Audio Player with Waveform and Playlist

[ad_1]

To get this product on 50 % low cost contact me on this link

 

LIVE PREVIEWBUY FOR $10

best selling wave player

Audio Player Intro

Want a nifty, reducing-edge, retina-prepared, responsive html5 audio participant to your web site ? ZoomSounds is the right candidate. With three skins to suit each model, just one format required to operate, ZoomSounds

WordPress Version

ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist - 1

Audio Player Features

  • HTML5 know-how – this gallery makes use of the most recent html5 tehniques to ship a by no means seen earlier than expertise to your purchasers
  • totally responsive – seems to be nice from cell to HD
  • flash backup – ie7 and ie8 don’t help html5, however these customers aren’t forgetten, the sounds will play for them too through the flash participant
  • one necessary format – the arduous half is finished by the participant script to ensure that the person to have simple expertise enhancing – solely mp3 is required
  • contact optimized – contact gadgets aren’t forgotten
  • 5 skins – for each want
  • three skins – three full skins to suit each model
  • CSS3 know-how – this participant makes use of reducing-edge css3 definitions
  • simple set up – buy, obtain the zip, learn the docs
  • iPhone / iPad optimized – this gallery has been optimized for Apple contact gadgets
  • Android optimized – this part has been examined on Android 4.0 and works superior
  • developer / SASS powered – this part’s CSS has been constructed on prime of SASS which suggests SASS customers can have a simple time modifying the skins. For non-SASS customers it’s no downside both as a result of CSS recordsdata ( generated by SASS ) are supplied
  • 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 extremely simple to edit with css information
  • search engine marketing pleasant – constructed with search engine marketing on thoughts from the bottom up, the Testimonial Rotator makes use of non hidden legitimate html markup to construct the widget
  • appropriate with all main browsers, together with IE – appropriate from IE7 to IE10, Chrome, Safari and Firefox
ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist - 2

Mobile Optimized

Smooth on mobiles too due to
{hardware} acceleration. Android 4.4+ Chrome
and iOS testedto ship tremendous clean
expertise

Watch Video

Audio Player Updates

If you may have up to date html recordsdata and have your individual undertaking, you solely must replace audioplayer/audioplayer.css and audioplayer/audioplayer.js and possibly writer.php – for the replace to use

UPDATE 4.26 [ 02/20/2018 ]

  • [FIX] writer.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 pores and skin-minimal
  • [TWEAK] reworked some calculation of present time / whole time
  • [ADD] gapless play function – play songs in a playlist with out interruption, the monitor that’s supposed to come back subsequent will preload 10 seconds earlier to it’s flip, so it may possibly begin instantly

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 enjoying choosing different tracks from the gallery retains the present enjoying monitor quantity

UPDATE 2.65 [ 05/19/2016 ]

  • [TWEAK] up to date preview
  • [ADD] index-sticktobottom-3.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 how you can use analytics for play occasion

UPDATE 2.63 [ 05/11/2016 ]

  • [FIX] bugs

UPDATE 2.62 [ 04/07/2016 ]

  • [ADD] instance on how you can play non-public soundcloud monitor through api
  • [ADD] load metadata occasion
  • [FIX] not enjoying on cell gadgets streaming from community knowledge

UPDATE 2.01 [ 09/07/2015 ]

  • [FIX] varied fixes

UPDATE 2.00 [ 01/20/2015 ]

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

UPDATE 1.62 [ 07/03/2014 ]

  • [FIX] autoplayNext pressured autoplay to on

UPDATE 1.50 [ 04/02/2014 ]

  • [ADD] pores and skin-professional
  • [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] pores and skin-justthumbandbutton
  • [ADD] new stick with backside mode
  • [ADD] new slick mode for pores and 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 Player Extra Features

Fully Customizable.

You can disable scrubbar, quantity controls, fullscreen controls thumbnail and extra. You can customise all colours through CSS. The participant on the left makes use of the second pores and skin of the participant. The first pores and skin being the sound wave pores and skin on the prime.

Retina Ready.

Each pores and skin is totally responsive and retina-prepared. 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 Player.

Sometimes extra is much less, and this participant has each state of affairs lined. This in the correct is the illustration of the third pores and skin of the participant, a minimal implementation which even has scrub controls ( should you click on on the margins ).

Only One Format.

Todays html5 audio gamers require the world in numerous audio codecs. But not this one. Only mp3 is required and ogg is non-obligatory.

Smart.

You can place as many gamers on a web page as you want. If one other participant is enjoying and you click on on a unique one, the opposite participant will cease enjoying, simply attempt in right here.

Multiple Sources.

Self hosted audios aren’t your solely possibility. You may also play streams from SoundCloud, and even Shoutcast radio stations*

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

Waveform Generator

With New Canvas Mode – After mp3 is loaded, the waveform might be generated robotically – this can occur solely as soon as and then might be saved into the database – so additional playings of the mp3 will learn from the saved generated waveform immediately

__

With Old ( Deprecated ) Image Mode:

  • generate waveforms with an admin panel ( waveformgenerator.php ) – on which you’ll be able to change coloration, multiplier, monitor locatinon and so on / flash primarily based
  • generate waveforms for all of the mp3s in a folder ( wavegeneratorfromdir.php ) / flash primarily based
  • generate waveform for tune.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

Notes

  • tracks and pictures aren’t included within the obtain package deal.
  • to make use of commenting system you’ll need php server
  • youtube is not going to work as audio on iDevices however as a video as a result of platform limitations
  • waveform might be generated robotically, however it should want a php server for the saving function

FAQ

In the smaller participant (the round participant on the correct hand facet of your demo web page) I would love to have the ability to make the entire participant bigger. Instead of 100px / 100px I would love 500px/ 500px. Where do I alter this? I’ve edited the canvas however it has gone smaller!

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

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

There is not any method to bind to the audio tag

It will create an audio tag by it’s personal

however I feel the format is pretty simple

<div id="apsimple" class="audioplayer-tobe" model="width:100%; margin-top:0;" knowledge-videotitle="Audio Video" knowledge-sort="normal" knowledge-supply="./sounds/adg3.mp3">
    <div class="meta-artist"><span class="the-artist">Tim McMorris</span> - It's a stunning day</div>
</div>
<script>
    jQuery(doc).prepared(operate ($) {

        dzsap_init("#apsimple", {
            autoplay: "off" 
        });
    });
</script>
how you can place play and artist on prime of wave ( in pores and skin-wave )

Just add the category alternate-pores and skin to the audioplayer aspect

the place are feedback saved ?

In db<a href=”/ folder – be certain permissions are set to 755

” rel=”nofollow”>/ folder – be certain permissions are set to 755

Comments don’t save / waveforms don’t save

For waveform technology additionally be certain

,"skinwave_comments_enable":"on","skinwave_comments_retrievefromajax":
"on"

is within the participant settings.

To entry the database you’ll need to have a php server. If you have already got one, then all that zoomsounds wants is the placement of writer.php . That file handles retrieving and publishing feedback / waveforms . If writer.php is in the identical folder because the html simply enter

,settings_php_handler:'writer.php'

within the participant settings. Otherwise, level to the right location.

For waveform technology additionally be certain

,"pcm_data_try_to_generate":"on"

is within the participant settings.

Where i can set “play next song automatically” in playlist

be certain autoplayNext is ready to “on” ( autoplayNext: “on” ) in audiogallery settings

is there a method to settle for MPEG file format audio-solely?

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

Credits

Other Awesome Products

ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist - 3
ZoomSounds - Neat HTML5 Audio Player with Waveform and Playlist - 4

[ad_2]

To get this product on 50 % low cost contact me on this link

 

Source

Pomento
Logo
Register New Account
Compare items
  • Total (0)
Compare
0
Shopping cart