Demo and download
Music: courtesy of radiOceanDownload 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.
- Ultra compact: All CSS and JS only takes up 4,45 KB (minified)
- Native HTML5 DOM API: No jQuery or other resources are required
- 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
Insert this HTML code in your document, where you want the player to appear.
Insert links to your MP3 files in the div with the ID "trackList"
Older browsers does not always 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)
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
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.
Note the the files are distributed in a minified format as well if you wish to optimize your pages loading time.