EverWeb Codebox logo

EverWeb Widgetbox 3

HTML5 Touch Audio MP3 Player

Touch Audio  MP3 WIdget

Midnight Train © Roddy McKay - 2002

Sad Lady Blues © Roddy McKay - 2002

Touch MP3 Audio Widget
Widget Settings


This MP3 audio player is designed to replace the default EverWeb audio player which is no use for touch control on mobile devices.
The audio player shown on the previous page is a lot more user friendly but some designers think that their visitors need some moving parts to occupy them while listening to the song!
This player is based on a design by Osvaldas Valutis which allows direct styling of the HTML5 audio element. The only departure from the original design was to tidy up some CSS elements and add javascript to pause one player when another is selected.
The player is inserted in a container with styling options so that track info can be added if required.
The player has a play/pause button which is large enough for a fingertip when used on mobile devices.
The player itself has quite a few options for styling. It should be noted that every player on the page must share this style although the individual containers can have individual styles.
It has a popup on hover volume control which disappears when viewed on a tablet or mobile phone. Both this, and the progress bar, can be styled with a linear gradient color.
The player body can have different gradient background colors, its corners rounded and a box shadow added.
The width can be changed by dragging.
The image below shows how the Audio MP3 player will look on mobile devices.

Touch MP3 Audio Widget
Mobile Website

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.