Audio MP3 Player Modules

An audio MP3 player for a responsive website needs special consideration since standard players like the EverWeb default one are pretty much uselss. They need to prevent the audio file from downloading on page load and have a large play/pause button like most modern videos players which is an easy target for fingertips.
Since some EverWeb users think that a progress bar is needed, this one shows loading and progress in the border around the button.
The widget can have anywhere between 1 and 48 audio players and the number per row on the various devices can be set.
Module
Each module has an image, an overlay caption which can be styled for font, size color and background color and its opacity and the player button. The images can have a border if required as shown in this example.
There is an optional heading for album and/or artist info at the top and a copyright notice field at the bottom. In this example, a Google hosted font is used with a web safe fallback.
The spacing between the modules can be adjusted and the background has an opacity control.
The widget can be vertically spaced away from the items above and below it.
Images
All the images need to have the same aspect ratio and should be cropped to the maximum size that they will appear on the web page before importing into EverWeb. An image width of around 360 to 400 px should suit most applications.
If background images are not required, take a screenshot of a background - solid or gradient - and crop it to the required size. Add it to the widget's Assets List as many times as required.