Panzer Audio Playlist

HTML5

Thank you for your purchase

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!

Installation

  1. Copy the panzer folder to your project and include the jQuery library + the plugin files inside the <head> tag of your page.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <link href="panzer/panzer.list.css" rel="stylesheet" media="all" />
    <script src="panzer/panzer.list.js" type="text/javascript"></script>
    
  2. Use multiple HTML5 <audio> tags in your markup:

    <audio controls preload="auto" autobuffer title="Preview1 title">
      <source src="preview1.mp3" type="audio/mpeg" />
      <source src="preview1.ogg" type="audio/ogg" />
    </audio>
    <audio controls preload="auto" autobuffer title="Preview2 title">
      <source src="preview2.mp3" type="audio/mpeg" />
      <source src="preview2.ogg" type="audio/ogg" />
    </audio>
    
  3. Initialize the audio player when the document is ready or right after the <audio> tags:

    $(function(){
      $('audio').panzerlist();
    });
    

Please refer to the examples for more details.

Configuration

The plugin can be customized easily using the options below.

Option Default Description
layout mini Determines the size of the player: mini, big
theme dark Determines the theme used for the player: dark, light, custom (need to add style to .panzerlist-custom and children)
expanded false Determines wheater to expand the player at layout full width. Useful for responsive designs.
title - Set a song title to be displayed before the playlist or album cover.
cover - Set a cover image with album or artist (image path). If specified, hides the playlist.
volume 100 Set initial volume for the audio player.
show_prev_next false Show previous and next controls.
show_list true Show list of files to be played.
pause_others true Determines if the player should pause when other panzer player song is played.
auto_start false Play first song when the player is loaded.
auto_advance true Play next song when the current one ends.
repeat_all false Play first song after the playlist ends - basically it repeats the playlist over and over again. auto_advance must be set in order for this setting to work.
auto_numbering false Determines if the plugin auto numbers the playlist items.
Make sure you check out the examples, too.

You can destroy the panzer interface and revert back to the native players:

$('audio').panzerlist('destroy');

Notes

If your browser doesn't have JavaScript enabled, the plugin fallbacks to the HTML5 <audio> tag. If the browser doesn't support the HTML5 <audio> tag, then a download link will be available for the user to get the files and listen to them locally on his computer.

Final thought

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist.