You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
eaiaiaiaoi/project/overlapping-interface.html

58 lines
1.6 KiB
HTML

<div style="background: #222">
<audio style="width: 100%" id="a1" controls src="description-lidia-CUT.mp3"></audio>
<audio style="width: 100%" id="a2" controls src="selection-track-extracts-1.mp3"></audio>
<button id="b">play</button>
</div>
<div class='sub'>
<div><a data-start="0.4" href="#">00:00:00,400</a> A vint</div>
<div><a data-start="8.18" href="#">00:00:08,180</a> A bag</div>
<div><a data-start="16.54" href="#">00:00:16,540</a> Someone with a bag</div>
<div><a data-start="28.52" href="#">00:00:28,520</a> Ok. Music</div>
<div><a data-start="33.16" href="#">00:00:33,160</a> Nice music</div>
<div><a data-start="50.86" href="#">00:00:50,860</a> What is that? Oh, the car, the market. I think</div>
<div><a data-start="77.68" href="#">00:01:17,680</a> Wind</div>
<div><a data-start="120.6" href="#">00:02:00,600</a> Wow</div>
<div><a data-start="136.68" href="#">00:02:16,680</a> Children?</div>
</div>
<script>
var a1 = document.getElementById("a1"),
a2 = document.getElementById("a2"),
b = document.getElementById("b");
b.addEventListener("click", function () {
if (a1.paused) {
a1.play();
a2.play();
} else {
a1.pause();
a2.pause();
}
})
a1.addEventListener("play", function(){
b.innerHTML="pause"
})
a1.addEventListener("pause", function(){
b.innerHTML="play"
})
var links=document.querySelectorAll("div.sub a")
for (var i=0, l=links.length; i<l; i++) {
var a = links[i];
a.addEventListener("click", function(e) {
console.log("CLICK", this);
var t=parseFloat(this.getAttribute("data-start"))
a1.currentTime=t
a2.currentTime=t
e.preventDefault()
a1.play();
a2.play();
})
}
</script>