The relative column widths are adjustable, the positions of the items can be switched and the player can be above or below the text below the breakpoint.
Apple MusicAudio MP3
Most website audio MP3 players are really outdated and aren't suitable for responsive pages where the visitor may be using a mobile touch device.
The player shown above has been built from scratch with mobile users in mind. It is very efficient and uses a tiny Javascript to replace all these bloated scripts usually required for audio players.
The relative column widths can be adjusted and the player layout can be switched. The info section can appear above or below the player on screen widths below the breakpoint.
Info
The player has a main heading and an article with an image width alt text, description and an optional link. In this case the link is to the tracks on the Apple Music website.
Player
The player can accept up to 48 MP3s. It has a two column grid layout which changes to three columns when the optional buy/download links are displayed.
The track number tab is configured as the play/pause function and is large enough to make it an easy target for a fingertip or thumb.
The track title/artist name is in column two and can run to two or more lines.
The optional links can open internal or external pages or files and have a new window option.
Separators
The optional separators have controls for percentage width and for line height, style and color. The styles are dashed, dotted, double and solid.
The copyright notice is centered at the bottom of the player.
Jukebox
This is a simplified single column version of the player above and has the option to insert an image with alt text behind the tracks. The background color opacity can be adjusted to show the image.
There is a dedicated play/pause function which is large enough to make it an easy target for a mobile device users.
The track title/artist name is in column two and can run to two or more lines.
The optional links can open internal or external pages or files and have a new window option.
The links can be used as "buy" or "download" links. In this case they are configured to open the appropriate page on the Apple Music website.
Separation
There is a control to adjust the vertical spacing of the tracks if the separators aren't shown.
The optional separators have controls for percentage width and for line height, style and color. The styles are dashed, dotted, double and solid.
The last separator can be hidden if required.
The optional copyright notice is centered at the bottom of the player.
Love
ThemeKit AV CD Audio Player
£ 10The article is vertically centered in the container and has a heading, text and an optional link.
BUYAV CD Player
The ThemeKit AV CD Player has a two column layout with adjustable relative column widths above. The break point and the text can appear above or below the MP3 player below the breakpoint.
Audio Bar Player
The bar style player was create due to requests by EverWeb users for a player with an image. As can be seen from the examples a square image can be made round if required.
ThemeKit AV Audio Bar
The audio MP3 player has a play/pause function which works in conjunction with other similar players on the same page.
The buy/download link is optional and in this case is set to open the appropriate page on Apple Music.
File Names
One of the main reasons for an audio track to fail is spaces or special charaters in the file name - the most common one being an apostrophe.