Super Audio Player An HTML5 audio player UI.

Welcome!

Super Audio Player is an jquery plugin for turning HTML into an interactive audio player!

See demo

Download

HTML

<ol id="tracklist" class="sap-playlist" style="display:none">
    <li>
        <span class="sap-playlist-track-title">Gentle Pianos and Other Things</span>
        <audio class="sap-playlist-track-audio">
            <source src="ogg/gentlep.ogg">
            <source src="ogg/gentlep.mp3">
        </audio>
        <div class="sap-playlist-track-frame">
            <h3>Learn More About This Track</h3>
            <p>This track was created for SAP-js, there is literally nothing more to it than that.</p>
        </div>
    </li>
    <li>
        <span class="sap-playlist-track-title">Lots of Bass</span>
        <audio class="sap-playlist-track-audio">
            <source src="ogg/lotsobass.ogg">
            <source src="ogg/lotsobass.mp3">
        </audio>
        <div class="sap-playlist-track-frame">
            <h3>Learn More About This Track</h3>
            <p>This track was created for SAP-js, there is literally nothing more to it than that.</p>
        </div>
    </li>
    <li>
        <span class="sap-playlist-track-title">The End</span>
        <audio class="sap-playlist-track-audio">
            <source src="ogg/end.ogg">
            <source src="ogg/end.mp3">
        </audio>
    </li>
</ol>

Javascript

$(".player-box").saplayer("#tracklist");

Result