test audio pop up

static/css/style.css

@@ -1,4 +1,4 @@
-* {
+html {
   background-color: gray;
 }
 
@@ -10,8 +10,8 @@
   position: absolute;
 }
 
-.draggable img {
-  opacity: 0.7;
+img {
+  opacity: 0.8;
 }
 
 .draggable iframe {
@@ -24,3 +24,17 @@
 #audio1 {
   margin-left: 400px;
 }
+
+/* audio and pop up images */
+#transcriptWrapper {
+  overflow: hidden;
+}
+
+#transcript > div {
+  transition: all 0.8s ease;
+  list-style-type: disc;
+}
+
+.speaking {
+  font-weight: bold;
+}

templates/perspectiveA.html

@@ -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>