Responsive Audio Player

Audio MP3 players like the EverWeb default one were a good choice back in the day when new players were needed to replace flash. Web design has come a long way since then and an audio player must be designed for mobile first. It is estimated that almost all audio is played on touch devices nowadays so it is really important to make them finger friendly.
A good audio player design has a play/pause button at least 32px square and the volums slider is history! It doesn't need a progress bar - just an indication of which track is playing.
The player used in this widget has a large target area for fingertips to play/pause any track and indicates the "live" track with a change in color and a playing icon. Selecting any track will pause the previously playing one.
Like all files used in web design, audio files should have no spaces or special characters in them The most common rookie mistake is to have an apostrophe which is more or less guaranteed to break the code.
Separate the individual words with hyphens to allow the search engines to pick out key words.
It is important to realise that the search engine spiders cannot look at images, watch movies or listen to music! Placing an audio file on a page with no text description is useless as far as SEO is concerned. A text box next to the player is not much of an improvement since the search engines have no way of relating it to the audio file.
Placing the audio in an HTML5 container along with a title and text description will ensure that track(s) will get indexed properly.

responsive audio player

Player Info

If there are more than two audio tracks on any page it is better and more efficient to use one or more playlist players.
These can be used to categorise songs by artist or genre.
There are options for adding a heading, variable width image with alt text, text description, the album or collection title and the all important copyright notice.
Just like video, it is important to prevent the audio files downloading with the rest of the page content - especially if it is the mobile version of the site or there are more than a few audio files.

© EverWeb Widgets -

EverWeb Widgets