Audio Player

Easily play music files on your website using the audio player feature.

* Requires HTML5

Required:

HTML

CSS

Demo

The Battle of New Orleans (1959)

~ Jimmy Driftwood & Johnny Horton

HTML

<div class="audio-player" itemprop="audio" itemscope itemtype="https://schema.org/AudioObject"><audio controls><source itemprop="contentUrl" type="audio/mpeg" src="https://framework.sabali.co/assets/sample.mp3"><div class="error-message"><h3>Not Available</h3><img width="10" height="10" class="content-image image-center rounded lazyload" src="https://framework.sabali.co/assets/placeholder.png" data-src="https://framework.sabali.co/icons/errors/error.png" alt="Error" class="error-icon" /><p>Your browser does not support this HTML5 audio element.</p></div></audio><meta itemprop="name" content="The Battle of New Orleans - Jimmy Driftwood and Johnny Horton (1959)"><meta itemprop="description" content="HTML5 Audio File."><div class="clear"></div></div><p><cite>The Battle of New Orleans (1959)</cite></p><p><cite>~ Jimmy Driftwood &amp; Johnny Horton</cite></p>

CSS

/* --- Audio Player --- */.audio-player {display: inline-block;overflow: hidden;}

Javascript

No Javascript

CSS Framework Link

<link rel="stylesheet" type="text/css" href="https://framework.sabali.co/css/audio-player.css">