by Roddy McKay
Full Width Audio MP3 Modules
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.
Let Me In
© Roddy McKay
by Roddy McKay
Rule Of The road
Sad Lady Blues
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.
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.