Speakker - music player on jQuery

Searching for the network music player for the site, I came across an interesting player called Speakker , written in jQuery.


The player has two designs:
Dark (dark):

in open form:

And light (light):




The main functions of the audio player are supported: playing tracks, adjusting the volume, rewinding, pause, and repeating the song.
')
Installs simply:

1. Download Archive
2. Unpacking
3. Paste the necessary files:

   <script src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="/__/speakker-big-__.min.js"></script> 

   
   
4. And initialize the player:
   

    <script type="text/javascript"> $(document).ready(function() { projekktor('.speakker'); }); </script> <!-- :   --> <audio class="speakker dark"> <!--     mp3  ogg --> <source src='/sound/' type="application/json"/> </audio> 

   
   

Speakker supports mp3 and ogg files.

In addition to playing one audio file, there is support for playlists in json format.
The archive has a tool to easily create a playlist in the server folder. To do this, we just need to throw the necessary tracks into the sound folder and specify this folder as the source of the playlist.

  <audio class="speakker dark"> <source src='/sound/' type="application/json"/> </audio> 

As a result, the php script will select id3 tags, including images, from files, and write them into a json file.
* Errors may occur due to Cyrillic audio file names.

There are also custom social and other buttons:

 $(document).ready(function() { $projekktor('.speakker dark', { plugin_share: { links: { 'download':{ buttonText: 'download', code: './sound/?dl=true' }, 'lastfm':{ buttonText: 'lastfm', code: 'http://www.lastfm.de/music/paniq' }, 'wikipedia':{ buttonText: 'wikipedia', code: 'http://de.wikipedia.org/wiki/Elektronische_Musik' }, 'admin':{ buttonText: 'admin', code: false } } }); }); 

There is also a get mix button, by which you can download all the compositions in the zip archive.

Of the minuses, it is possible to note the incorrect display of the layers (in particular, I had buttons from bootstrap, some other elements ran over the player), styles right in the js file, and the lack of api.

Read more at www.speakker.com