|
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
|
|
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
|
|
|
<script src="../static/js/draggable.js"></script>
|
|
|
|
|
<head>
|
|
|
|
|
<link rel="stylesheet" href="../static/css/style.css?q=1280549780">
|
|
|
|
|
<title>Perspective A</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Perspective A</h1>
|
|
|
|
|
<div id="audio1">
|
|
|
|
|
<audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="draggable">
|
|
|
|
|
<iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
<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>
|
