EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Audio MP3 Playlist Widget

Touch Audio MP3 Playlist Player

The Player

The player is based on the AudioJS jQuery plugin.
On touch devices, play/pause is by tapping the track title/artist name bar and there is a fingertip sized stop button..
It can show a player with play/pause button, progress bar and elapsed/run time on the full version of the site.
The player can have a background image if required instead of a color.
Make sure the audio file names have no spaces or special characters such as apostrophe in them.
Separate individual words with a hyphen.
See the full site version with player control bar on the next page.

Touch Audio Playlist Widget
Touch Audio Playlist Widget

Widget Settings

Choose the audio MP3 files, highlight each one in turn and enter the track title/artist name.
Choose the overall font family and set the track info font size and color.
Adjust the value for TB Padding to increase/decrease the height of the list items. This should be high enough to make them an easy target for fingertips.
Adjust the value for LR padding to move the track title horizontally.
Set the separator height, style and color.
Check the box to display a heading.
Enter the heading text and set its size and color.
Set the styles for the playing track icon in respect of color and font size.
Adjust the playing icon position using the values for right and top.
Set the background color or check the box and select a background image.
NOTE: The background image should be imported at roughly the same size and aspect ratio as the player. The image will stretch to fit the width exactly.
Set the player border width, color and corner radius.
Set the box shadow color and radius if required.
For touch device use, leave the "Display Player" box unchecked and check the box to display the Stop Button.
Enter the stop button text.
Enter the button width and then adjust its height using the value for TB padding. Make sure the button size is large enough for a fingertip.
Set the button font size, color and background color.
Set the button border width, color and corner radius if required.
Set the box shadow color and radius if required.
NOTE: The autoplay setting is there for those who are misguided enough to use it on a full site. Mobile devices don't do autoplay.

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …

This widget is included in the Touch Audio Video widget pack.