thomasfillon/jsbin.UGIxoJis.html

## jsbin.UGIxoJis.html
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {

  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");
  var t = document.getElementById('Time');

  p.addEventListener('input',function(){
    c.innerHTML = p.value;
    v.playbackRate = p.value;
  },false);

  v.addEventListener('timeupdate',function(event){
            t.innerHTML = v.currentTime;
            },false);

};
</script>


<style>
.holder {
   width:640px;
   height:360;
   margin: 0 auto;
   margin-bottom:14em;
}

#pbr {
   width:100%;
}
</style>

</head>
<body>

<div class="holder">
  <audio id="myVideo" controls>
    <source src="http://diadems.telemeta.org/archives/items/download/CNRSMH_E_1985_001_001_001_04.mp3"
          type='audio/wav' />
  </audio>

  <form>
    <input id="pbr" type="range" value="0.5"
                    min="0.5" max="4" step="0.1" >

    <p>Playback Rate <span id="currentPbr">1</span></p>
  </form>
</div>
  <div id='Time'>

  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	window.onload = function () {

	var v = document.getElementById("myVideo");
	var p = document.getElementById("pbr");
	var c = document.getElementById("currentPbr");
	var t = document.getElementById('Time');

	p.addEventListener('input',function(){
	c.innerHTML = p.value;
	v.playbackRate = p.value;
	},false);

	v.addEventListener('timeupdate',function(event){
	t.innerHTML = v.currentTime;
	},false);

	};
	</script>


	<style>
	.holder {
	width:640px;
	height:360;
	margin: 0 auto;
	margin-bottom:14em;
	}

	#pbr {
	width:100%;
	}
	</style>

	</head>
	<body>

	<div class="holder">
	<audio id="myVideo" controls>
	<source src="http://diadems.telemeta.org/archives/items/download/CNRSMH_E_1985_001_001_001_04.mp3"
	type='audio/wav' />
	</audio>

	<form>
	<input id="pbr" type="range" value="0.5"
	min="0.5" max="4" step="0.1" >

	<p>Playback Rate <span id="currentPbr">1</span></p>
	</form>
	</div>
	<div id='Time'>

	</div>
	</body>
	</html>