CSS Codes
CSS Layouts

<html>
<head>

<link href="bgaudioplayer.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="bgaudioplayer.js">

/***********************************************
* HTML5 background audio player (c) Dynamic Drive (www.dynamicdrive.com)
* Please keep this notice intact
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

</head>

<body>

<!--Define audio tag with source elements pointing to audio file (and fallback files)-->

<audio id="mybgplayer">
<source src="MarionHarris-IAintGotNobody.mp3" type="audio/mpeg">
<source src="MarionHarris-IAintGotNobody.ogg" type="audio/ogg">
</audio>

<!--Define corresponding audio interface. Certain CSS classes trigger changes to them-->

<div id="mybgplayerui" class="bgplayerui">
<img class="play" src="play.gif" data-pausesrc="pause.gif" /> <img class="rewind" src="restart.gif" style="position:relative; left:-4px" /> <div class="volume"></div>

</div>

<script>


var playerinstance=bgaudioplayer({
audioid: 'mybgplayer', // id of audio element
audiointerface: 'mybgplayerui', // id of corresponding UI div
autoplay: true, // auto play music?
persistTimeLine: true, // Persist player's current timeline/ volume when moving from page to page?
volume: 0.1, // Default volume (0.0 to 1.0)
volumelevels: 15 // # of volume bars to show in UI
})

</script></body>
</html>