Triphonic player: Difference between revisions

Latest revision as of 18:18, 16 April 2013

A Triphonic player using jQuery + jQueryUI + HTML5

<!DOCTYPE HTML>
<html>
<head>

<script src= "http://pzwart3.wdka.hro.nl/lib/jquery/jquery.js"></script>
<script src="http://pzwart3.wdka.hro.nl/lib/jquery/jquery-ui.js"></script>
<style>

.bar {
	position:relative;
	background: aqua;
	height: 48px;
}
.head {
	position:absolute;
	left:0px;
	top:0px;
	background: brown;
	height: 100%;
	width: 48px;
	border: 2px dotted yellow;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	opacity:0.5;

}


</style>
</head>
<body>
<!-- audiotag 1 -->
<audio  id = "at1">
<source src= "http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
<source src= "http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">
</audio>
<!-- audiotag 2 -->
<audio id = "at2">
<source src= "http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
<source src= "http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">
</audio>
<!-- audiotag 3 -->
<audio  id = "at3">
<source src= "http://wsdownload.bbc.co.uk/worldservice/css/96mp3/latest/bbcnewssummary.mp3">
<source src= "http://pzwart3.wdka.hro.nl/~mmurtaugh/bbcnewssummary.ogg">
</audio>

<div>
	<div class ="bar">
		<div class ="head" id="hat1">H1</div>
		<div class ="head" id="hat2">H2</div>
		<div class ="head" id="hat3">H3</div>
	</div>

	<button id="masterplay">
	play
	</button>
</div>



<script>
var dragging = false
var audio = $("audio").get(0);
//pause / play all the audio
$("#masterplay").bind("click", function(){
	if ($("audio").get(0).paused) {
		$("audio").each(function(){this.play()})
			
	}else {
		$("audio").each(function(){this.pause()})	
	}
})

$("audio").bind("durationchange",
	function(){
		//audio.currentTime= 60;
		//audio.play();
	//	console.log(audio.duration);
	}
)

$("audio").bind("timeupdate",
	function(){
		if (dragging) return
		//console.log(this,this.currentTime,this.duration);
		//gets 
		$('#h'+this.getAttribute('id')).css({
			left: Math.floor((this.currentTime/this.duration)*($(".bar").width()-48))+"px"
		})
		}
)

$(".head").draggable({ containment: "parent", drag:function(){
	dragging = true
	var l =	parseInt($(this).css("left"))
	//dividing the current position by the maximum position to get the css scale
	var p = l / ($(".bar").width()-48)
	var t = $("audio").get(0).duration * p
	//console.log(l, p, t)
	var audio = $('#'+this.getAttribute('id').substr(1))
	audio.get(0).currentTime=t

},stop:function(){
	dragging = false
} })
	
</script>
</body>
</html>

@@ Line 1: / Line 1: @@
 A Triphonic player using jQuery + jQueryUI + HTML5
+[http://pzwart3.wdka.hro.nl/~rroscam/triphonic.html live sample]
 <source lang='javascript'>