|
|
@ -19,5 +19,75 @@ |
|
|
|
<div class="draggable"> |
|
|
|
<iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="draggable" style="top: 260%; left:0.2%"> |
|
|
|
<button id="but"><h3>listen</h3></button> |
|
|
|
<audio ontimeupdate="playTranscript()" id="a1" controls src="../static/audio/Clip26" class="audio-tag"></audio><a href="" target="_blank"> |
|
|
|
<div id="transcriptWrapper" class='sub'> |
|
|
|
|
|
|
|
<div id="transcript"> |
|
|
|
<div><a data-start="0.4" href="#">00:00:00,400</a><img src="../static/images/TheStreamRunsBlurry_scan.png" width='500px' alt="test"></div> |
|
|
|
<div><a data-start="8.18" href="#">00:00:08,180</a><img src="../static/images/NilgünMarmara_scan.png" width='500px' alt="test"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
<script> |
|
|
|
var a1 = document.getElementById("a1"), |
|
|
|
but = document.getElementById("but"); |
|
|
|
but.addEventListener("click", function () { |
|
|
|
if (a1.paused) { |
|
|
|
a1.play(); |
|
|
|
} else { |
|
|
|
a1.pause(); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
a1.addEventListener("play", function(){ |
|
|
|
but.innerHTML="pause" |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
a1.addEventListener("pause", function(){ |
|
|
|
but.innerHTML="listen" |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
e.preventDefault() |
|
|
|
a1.play(); |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<script> |
|
|
|
var dialogueTimings = [0,8], |
|
|
|
dialogues = document.querySelectorAll('#transcript>div'), |
|
|
|
transcriptWrapper = document.querySelector('#transcriptWrapper'), |
|
|
|
audio = document.querySelector('#a1'), |
|
|
|
previousDialogueTime = -1; |
|
|
|
|
|
|
|
function playTranscript() { |
|
|
|
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime})); |
|
|
|
if(previousDialogueTime !== currentDialogueTime) { |
|
|
|
previousDialogueTime = currentDialogueTime; |
|
|
|
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; |
|
|
|
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; |
|
|
|
var previousDialogue = document.getElementsByClassName('speaking')[0]; |
|
|
|
if(previousDialogue !== undefined) |
|
|
|
previousDialogue.className = previousDialogue.className.replace('speaking',''); |
|
|
|
currentDialogue.className +=' speaking'; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
</html> |
|
|
|