Browse Source

test audio pop up

master
nglk 4 years ago
parent
commit
67d5aa9feb
  1. 20
      static/css/style.css
  2. 70
      templates/perspectiveA.html

20
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;
}

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

Loading…
Cancel
Save