Triphonic player
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>