Full Width Audio MP3 Modules

Description

The widget creates three, inline uadio MP3 players in a responsive container which has a maximum width setting.
Each module has a Play/Pause button and a centered paragraph for track info.
The info can extend to two lines using an HTML line break and the position of the text from the top of the player container is adjustable for each player.
The track info, player and the container all have several styling options for adding borders, box shadows and adjustung the background opacity of both the conatiner and the play/pause button.

Full Width MP3 Audio Modules Widget

Cosmic Traveler
by Roddy McKay

Country Woman

Let Me In
© Roddy McKay

Midnight Train
by Roddy McKay

Rule Of The road

Sad Lady Blues

Audio Files

Make sure the audio files are in the MP3 format and that there are no spaces or special characters in the file name.
To prevent the tracks being ripped off, create a representative edited version with about 60 seconds of audio and a fade in/out.

Full Audio MP3 Modules Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the maximum width.
For each player, choose the MP3 file, enter the track info and set its position relative to the top. Use <br> to return to a second line if required.
Set the Play and Pause button icon colors and then style the buttons with respect to border color, background color and opacity and box shadow radius and color.

Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size, color, container background color and opacity and the line height if the text extends to two lines.

Set the container border width and color if required.
Set the container box shadow radius and color if required.

This widget is included in the Full Width widget pack.

EverWeb Widgets | Full Width