HTML5 audio player

Demo and download

Music: courtesy of radiOcean

Download Source Files

This free HTML5 Audio Player from Nillervision can be embedded on any website and is supported by all modern browsers.

The software is 100% free, but if you enjoy it, please make a donation. Donations will allow me to continue to develop free resources like this one.

Features

• Ultra compact: All CSS and JS only takes up 4,45 KB (minified)
• Native HTML5 DOM API: No jQuery or other resources are required
• No JavaScript knowledge needed: just add links to mp3 files in the specified div
• Volume -and progress-sliders (only visible when playing a track)
• Responsive layout
• OGG file fall-back (Optional)
• Falls back to MP3 download or plugin playback in non HTML5 browsers

Usage

Download and unzip the files. You will then have a folder containing an HTML-file, a CSS-file and a JavaScript-file. You can choose to use the existing HTML-file as a template or paste the code into your own HTML document.

HTML

Insert this HTML code in your document, where you want the player to appear.

<div id="audioPlayer"> <audio id="audio"></audio> <div id="trackList"> <!--INSERT YOUR LINKS HERE--> </div> <div id="messages">Wait...</div> <div id="controls"> <button id="stop">STOP</button> <label for="slider">Pos:</label> <input id="slider" type="range" min="0" max="100" value="0" step="1" /><br/> <label for="volKnob">Vol:</label> <input id="volKnob" type="range" min="0" max="10" value="10" step="1" /> </div> </div>

Insert links to your MP3 files in the div with the ID "trackList"

<div id="trackList"> <a href="my-file.mp3">My Track Title</a> <a href="my-other-file.mp3">My Other Track Title</a> </div>

OGG fall-back

Older browsers do not all support native MP3. To optimize support you can add an url to an OGG file to fallback to (You must use the data attribute, the href attribute must always point to a mp3 file)

<a href="my-file.mp3" data-oggfallback="my-file.ogg">My Track Title</a>

CSS and JavaScript files

For everything to work you must add links to the download CSS and JS files.

The link to the CSS file should be placed somewhere between the head tags in your document

<link rel="stylesheet" href="audioplayer.css" type="text/css" media="all" />

The link to the JS file can be inserted either in the head or the body element, but I recommend that you place it at the end of your HTML, just before the closing body tag.

<script type="text/javascript" src="audioplayer.js"></script>

Note the the files are distributed in a minified format as well if you wish to optimize your pages loading time.