Embedding audio players into site?



I searched, but couldn’t really come up with anything.

I’m not a novice when it comes to website design, but when it comes to integrating media I’m not very knowledgeable.

I audio record bands (that allow it) and up until now I’ve had a few samples up on my site that get opened in a new window and played using the quicktime player.

What I’d like to do is embed a player to page and be able to feature a show or multiple mp3s in that player that users can either listen to having it automatically go from one track to the next when it ends or be able to scroll and pick songs they’d like to hear.

Anybody got any advice about embedding an audio player into the site for a collection of mp3s rather than a quicktime player for each mp3?



One easy option is the JW Player widget, which is available (with instructions) at media.dreamhost.com.

There are a number of other Flash-based audio players available online (two popular ones are FlowPlayer and MediaElement.js). Don’t be dissuaded by the fact that they’re also video players; they’ll all work for MP3 files just as well.


Actually, mediaelement.js uses Flash only as fallback, no as “Fallforward” as they call it, as the fantastic thing is it’s a html5/css based player that makes use of the new audio and video elements in html5 and then if the browser doesn’t support those elements or the specific media format fully, it uses Flash OR Silverlight instead. It’s really the best of 3 worlds!

As everything visual is done in CSS this means it looks and largely work the same in all browsers since IE6.

I use it for embedding audio in my web pages. There are a few very small gripes in some browsers, but on overall Mediaelement.js changed the game totally for the better!

Read more at the mediaelement site: How it works.