EverWeb Codebox logo

EverWeb Widgetbox 3

Touch Audio MP3 Widget

Touch Audio MP3 Player

The Player

Anybody who has created a website for touch devices will know that most audio players such as the EverWeb default one are useless for this purpose.
The start/pause button is way to small and the volume slider ineffective.
This widget creates an audio MP3 button player which has the dimensions recommended by Apple for touch devices. The player can be either rectangular with a rounded corner option or circular.
The icon, background, border and box shadow colors can be set for both the play and pause states.
The rectangle can be converted to a cicle by sliding the Corner Radius control to the far right.
The player is based on the mediaelement audio jQuery plugin. Any number of players can be placed on a page and one will stop when another is started.
Like the other audio player widgets, this player should NOT be placed on the same page as any other type.
If more than a few tracks are required on any one page, the playlist player on the next page is a better option and can also display the track title/artist name.

Touch Audio MP3 Widget

Widget Settings

Before dragging the audio MP3 files into the assets list, make sure the file names have no spaces or special characters such as an apostrophe. Separate individual words with hyphens.
Choose the audio file and adjust the corner radius. Drag the control to the far right to create a circular player button.
Set the play state colors - icon, background and border. Set the box shadow radius and color if required.
Set the pause state colors - icon, background and border. Set the pause box shadow radius and color if required.

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

Touch Widgets Bulk Pack Discount Deal

Buy all 4 Touch Widget packs for $30.00 …