<div id="player">
		<div id="volume"></div>
	</div>

body {
    height: 300px;
    background: rgb(17, 17, 17);
    background: -webkit-gradient(radial, center center, 0, center center, 40%,
    	from(rgba(100, 100, 100,0.5)), to(rgba(17, 17, 17,0))) no-repeat
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -webkit-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -moz-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat, 
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -ms-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: -o-radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    	url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    	rgb(17, 17, 17);
    background: radial-gradient(rgba(100, 100, 100,0.5),
    	rgba(17, 17, 17,0) 40%) no-repeat,
    url(http://iviewsource.com/exercises/audioslider/images/backgroundpattern.png),
    rgb(17, 17, 17);
}

#player {
    width: 350px;
    height: 50px;    
    position: relative;
    margin: 0 auto;
    top: 150px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-background.png') no-repeat left top;
}

#volume {
    position: absolute;
    left: 24px;
    margin: 0 auto;
    height:15px;
    width: 300px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-empty.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-range-min {
    height:15px;
    width: 300px;
    position: absolute;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-full.png') no-repeat left top;
  border: none;
  outline: none;
}

#volume .ui-slider-handle {
    width: 38px;
    height:39px;
    background: url('http://iviewsource.com/exercises/audioslider/images/volume-knob.png') no-repeat left top;
    position: absolute;
    margin-left: -15px;
    cursor: pointer;
    outline: none;
    border: none;
}

$("#volume").slider({
    min: 0,
    max: 100,
    value: 0,
		range: "min",
		animate: true,
    slide: function(event, ui) {
      setVolume((ui.value) / 100);
    }
  });

  var myMedia = document.createElement('audio');
  $('#player').append(myMedia);
  myMedia.id = "myMedia";
	playAudio('http://iviewsource.com/exercises/audioslider/audio/ViewSource', 0);

function playAudio(fileName, myVolume) {
  var mediaExt = (myMedia.canPlayType('audio/mp3')) ? '.mp3' 
  	: (myMedia.canPlayType('audio/ogg')) ? '.ogg' 
  	: '';
  if (mediaExt) {
    myMedia.src = fileName + mediaExt;
    myMedia.setAttribute('loop', 'loop');
    setVolume(myVolume);
    myMedia.play();
  }
}

function setVolume(myVolume) {
    var myMedia = document.getElementById('myMedia');
    myMedia.volume = myVolume;
}