EverWeb Widgets

Mobile Compatible MP3 Audio Player

Audio Player Essentials

There are a lot of audio players around but very few of them are suitable for responsive page designs since the controls are too small for touch devices like the iPad and iPhone.
This design was commisioned by a music publishing company who needed a player with a large play/pause button, track title and artist name and a progress bar which was large enough for the visitor to tap and drag.
As with any media player suitable for responsive designs, the audio files can be prevented from downloading until the play button is clicked or tapped. This is essential when more than a couple of tracks are inserted on a page to ensure that the download time is not effected.
The background image option was required for inserting the album artwork.
Unlike the EverWeb default audio player, this one uses no images and only one tiny Javascript file that weighs in and only 3KB making it suitable for mobile use.

Audio Stack

The widget can create a single player or a stack. Note that it does not function as a playlist player and does not play the tracks sequentially.
The player can have up to 48 tracks and preload set for "none" or "auto" on a per track basis.
Controls
User inputs for a touch device need to be a minimum of 32 x 28px. It's fairly easy to enlarge the play/pause button on an existing player but the progress bar is usually fairly complicated in its design.
The progress bar overcomes the problem of tapping and dragging by having a control to increase its height when viewed on mobile devices.
As can be seen from the demo, the progress bar can be styled with a gradient background and has controls for adding a border and border radius.
If viewing this page on a computer, select a track to play and reduce the browser width to see how the progress bar height changes from 12px to 24px on screen widths below the break point.
Image
The player background can be a color or an image. Make sure the image is cropped to an appropriate size before importing into EverWeb.
The image in the palyer above was cropped to 600 x 360px since this approximates the actual size of the player.
The progress bar is shown full width when viewed on the EverWeb design canvas to make editing easy and is then hidden prior to publishing by checking a box.
Container
The container is centered with a maximum setting. There are controls for border width, color and radius.
The individual items can have a sparator which has controls for border width, color and style. The available styles are dashed, dotted and solid.
The full width wrapper has controls for background color and opacity and for setting the spacing from the items above and below and from the browser/device window edges.