@ -6,8 +6,8 @@
< script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > < / script >
< script src = "js/draggable.js" > < / script >
< script src = "js/jquery.ui.touch-punch.min.js" > < / script >
< script src = "js/main.js" > < / script >
< title > Player< / title >
< link rel = "shortcut icon" href = "images/speaker_logo.png" / >
< / head >
@ -80,12 +80,28 @@ $("#katalin").click(function(){
< section >
< div class = "draggable" style = "position:absolute; top: 12 %; left:51%;width: 270px">
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< div class = "draggable" style = "position:absolute; top: 6 %; left:51%;width: 270px">
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< a href = "images/meeting-20190328-leeszaal-6.jpg" target = "_blank" >
< img src = "images/meeting-20190328-leeszaal-6.jpg" width = "270px" >
< / a >
< p > warming up @Leeszaal< / p >
< p > warming up @Leeszaal 28/3< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:10%; left:48%;width: 270px" >
< audio controls src = "audio/leeszaal-discussing-20190530.mp3" > < / audio >
< a href = "images/meeting-20190530-leeszaal-4.jpg" target = "_blank" >
< img src = "images/meeting-20190530-leeszaal-4.jpg" width = "270px" >
< / a >
< p > discussing about voice in public @Leeszaal 30/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:16%; left:55%;width: 270px" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190508.mp3" > < / audio >
< a href = "images/vowels-20190508-leeszaal-3.jpg" target = "_blank" >
< img src = "images/vowels-20190508-leeszaal-3.jpg" width = "270px" >
< / a >
< p > trascribing+singing vowels @Leeszaal 3/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:15%; left:41%; width: 270px" >
@ -93,7 +109,7 @@ $("#katalin").click(function(){
< a href = "images/meeting-20190523-leeszaal-6.jpg" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-6.jpg" width = "270px" >
< / a >
< p > reading extracts @outside Leeszaal< / p >
< p > reading extracts @outside Leeszaal 23/5 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:18%; left:37%; width: 270px" >
@ -101,7 +117,7 @@ $("#katalin").click(function(){
< a href = "images/vowels-20190328-leeszaal.jpg" target = "_blank" >
< img src = "images/vowels-20190328-leeszaal.jpg" width = "270px" >
< / a >
< p > singing vowels @outside Leeszaal< / p >
< p > singing vowels @outside Leeszaal 28/3 < / p >
< / div >
@ -111,89 +127,140 @@ $("#katalin").click(function(){
< img src = "images/meeting-20190523-leeszaal-7.jpg" width = "270px" >
< / a >
< p > warming up @outside Leeszaal< / p >
< p > warming up @outside Leeszaal 23/5 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:2 5 %; left:66%;width: 270px">
< div class = "draggable" style = "position:absolute; top:2 3 %; left:66%;width: 270px">
< audio controls src = "audio/distort_leeszaal_20190523-1341.mp3" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-2.jpg" width = "270px" >
< / a >
< p > personal experiences-distorted voice @outside Leeszaal< / p >
< p > personal experiences-distorted voice @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:27%; left:68%;width: 270px" >
< audio controls src = "audio/leeszaal-extracts-20190530.mp3" > < / audio >
< a href = "images/fresh1.jpg" target = "_blank" >
< img src = "images/fresh1.jpg" width = "270px" >
< / a >
< p > reading extracts @Leeszaal 30/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:30%; left:70%;width: 270px" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio >
< div class = "draggable" style = "position:absolute; top:3 2 %; left:70%;width: 270px">
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190329-finearts-1.JPG" width = "270px" / > < / a >
< p > discussing about voice in public @Fine Arts< / p >
< p > discussing about voice in public @Fine Arts 29/3< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:36%; left:73%;width: 270px" >
< audio controls src = "audio/leeszaal-meeting-warming-20190508.mp3" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190508_leeszaal.jpg" width = "270px" / > < / a >
< p > warming up @Leeszaal 8/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:42%; left:75%;width: 270px" >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" > < / audio >
< a href = "" target = "_blank" > < img src = "images/meeting-20190328-leeszaal-1.JPG" width = "270px" / > < / a >
< p > transcribing vowels @Leeszaal< / p >
< p > transcribing vowels @Leeszaal 28/3< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:47%; left:74%;width: 270px" >
< audio controls src = "audio/leeszaal-warming-20190530.mp3" > < / audio >
< a href = "images/meeting-20190530-leeszaal-2.jpg" target = "_blank" > < img src = "images/meeting-20190530-leeszaal-2.jpg" width = "270px" / > < / a >
< p > warming up @Leeszaal 30/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:55%; left:73%;width: 270px" >
< audio controls src = "audio/finearts-meeting-choir.mp3" > < / audio >
< audio controls src = "audio/finearts-meeting-choir.mp3" > < / audio >
< a href = "" target = "_blank" > < img src = "images/vowels-20190329-finearts.jpg" width = "270px" / > < / a >
< p > singing vowels @Fine Arts< / p >
< p > singing vowels @Fine Arts 29/3< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:59%; left:71%;width: 270px" >
< audio controls src = "audio/leeszaal-coffee-20190530.mp3" > < / audio >
< a href = "images/meeting-20190530-leeszaal-3.jpg" target = "_blank" > < img src = "images/meeting-20190530-leeszaal-3.jpg" width = "270px" / > < / a >
< p > coffee time @Leeszaal 30/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:65%; left:70%;width: 270px" >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" > < / audio >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-1.jpg" width = "270px" >
< img src = "images/meeting-20190523-leeszaal-1.jpg" width = "270px" >
< / a >
< p > singing vowels-distorted voice @outside Leeszaal< / p >
< p > singing vowels-distorted voice @outside Leeszaal 23/5 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:23%; left:32%;width: 270px" >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" > < / audio >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190329-finearts-2.JPG" width = "270px" / >
< img src = "images/meeting-20190329-finearts-2.JPG" width = "270px" / >
< / a >
< p > transcribing vowels @Fine Arts< / p >
< p > transcribing vowels @Fine Arts 29/3 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:27%; left:29%; width: 270px" >
< audio controls src = "audio/finearts-meeting-extracts.mp3" > < / audio >
< audio controls src = "audio/finearts-meeting-extracts.mp3" > < / audio >
< a href = "images/carson-extract.jpg" target = "_blank" >
< img src = "images/carson-extract.jpg" width = "270px" / >
< img src = "images/carson-extract.jpg" width = "270px" / >
< / a >
< p > reading extracts @Fine Arts< / p >
< p > reading extracts @Fine Arts 29/3 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:33%; left:26%;width: 270px;" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190523.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190523.mp3" > < / audio >
< a href = "images/meeting-20190523-leeszaal-4.jpg" target = "_blank" >
< img src = "images/meeting-20190523-leeszaal-4.jpg" width = "270px" >
< img src = "images/meeting-20190523-leeszaal-4.jpg" width = "270px" >
< / a >
< p > transcribing vowels @outside Leeszaal 23/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:38%; left:27%;width: 270px;" >
< audio controls src = "audio/leeszaal-sentenses-distorted-20190530.mp3" > < / audio >
< a href = "images/meeting-20190530-leeszaal-1.jpg" target = "_blank" >
< img src = "images/meeting-20190530-leeszaal-1.jpg" width = "270px" >
< / a >
< p > transcribing vowels @outside Leeszaal< / p >
< p > statements- distorted voice @Leeszaal 30/5 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:46%; left:28%; width: 270px" >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" > < / audio >
< a href = "" target = "_blank" >
< img src = "images/meeting-20190328-leeszaal-2.JPG" width = "270px" / > < / a >
< p > discussing about voice in public @Leeszaal < / p >
< img src = "images/meeting-20190328-leeszaal-2.JPG" width = "270px" / > < / a >
< p > discussing about voice in public @Leeszaal 28/3 < / p >
< / div >
< div class = "draggable" style = "position:absolute; top:51%; left:29%; width: 270px" >
< audio controls src = "audio/leeszaal-singing-distorted-20190530.mp3" > < / audio >
< a href = "images/vowels-20190508-leeszaal-1.jpg" target = "_blank" >
< img src = "images/vowels-20190508-leeszaal-1.jpg" width = "270px" / > < / a >
< p > singing vowels- distorted voice @Leeszaal 30/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:57%; left:30%;width: 270px;" >
< audio controls src = "audio/finearts-meeting-choirhigh.mp3" > < / audio >
< a href = "images/meeting-20190329-finearts-5.JPG" target = "_blank" > < img src = "images/meeting-20190329-finearts-5.JPG" width = "270px" / > < / a >
< p > singing vowels (high) @Fine Arts< / p >
< p > singing vowels (high) @Fine Arts 29/3< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:61%; left:32%;width: 270px;" >
< audio controls src = "audio/leeszaal-meeting-extracts-20190508.mp3" > < / audio >
< a href = "images/meeting-20190328-leeszaal-4.jpg" target = "_blank" > < img src = "images/meeting-20190328-leeszaal-4.jpg" width = "270px" / > < / a >
< p > reading extracts @Leeszaal 8/5< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:66%; left:32%;width: 270px;" >
< div class = "draggable" style = "position:absolute; top:66%; left:3 5 %;width: 270px;">
< audio controls src = "audio/finearts-meeting-warming.mp3" > < / audio >
< a href = "images/meeting-20190329-finearts-4.JPG" target = "_blank" > < img src = "images/meeting-20190329-finearts-4.JPG" width = "270px" / > < / a >
< p > warming up @Fine Arts< / p >
< p > warming up @Fine Arts 29/3 < / p >
< / div >
@ -208,16 +275,15 @@ $("#katalin").click(function(){
< section style = "margin-top: 1300px !important;" >
< div class = "tooltip-wrap" >
< audio style = "width: 100%;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" > < / audio > < a href = "" target = "_blank" >
< audio style = "width: 100%;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< div > selection of recordings while wandering around Leeszaal< / div >
< img src = "images/20190123-track-annotated.png" width = "100%" >
< / div >
<!-- have to add id="transcriptWrapper..." -->
< div > selection of recordings while wandering around Leeszaal< / div >
< / div >
< / div >
< div class = "tooltip-wrap" >
< audio ontimeupdate = "playTranscript()" style = "width: 100%; background: #222;" id = "a2" controls src = "audio/description-lidia-CUT.mp3" > < / audio > < a href = "" target = "_blank" >
< audio ontimeupdate = "playTranscript()" style = "width: 100%; background: #222;" id = "a2" controls src = "audio/description-lidia-CUT.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
< div id = "transcriptWrapper" class = 'sub' >
< h3 > Lidia< / h3 >
@ -236,7 +302,7 @@ $("#katalin").click(function(){
< div class = "tooltip-wrap" >
< audio ontimeupdate = "playTranscript3()" style = "width: 100%; background: #222;" id = "a3" controls src = "audio/description-eugenie-CUT-SHORT.mp3" > < / audio > < a href = "" target = "_blank" >
< audio ontimeupdate = "playTranscript3()" style = "width: 100%; background: #222;" id = "a3" controls src = "audio/description-eugenie-CUT-SHORT.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
< div id = "transcriptWrapper3" class = 'sub' >
< h3 > Eugenie< / h3 >
@ -258,10 +324,10 @@ $("#katalin").click(function(){
< div class = "tooltip-wrap" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "a4" controls src = "audio/description-alex1.mp3" > < / audio > < a href = "" target = "_blank" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "a4" controls src = "audio/description-alex1.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
<!-- have to add id="transcriptWrapper..." -->
< div class = 'sub' >
< h3 > Alex< / h3 >
< div > < a data-start = "11.74" href = "#" > 00:00:11,740< / a > Em... I hear... It sounds like walking and it's quite windy outside< / div >
@ -291,18 +357,17 @@ Oh, I hear children in the background crying</div>
<!-- second sounwalk player -->
< div class = "tooltip-wrap" >
< audio style = "width: 100%; background: #FFFFFF;" id = "b1" controls src = "audio/selectionB.mp3" > < / audio > < a href = "" target = "_blank" >
< audio style = "width: 100%; background: #FFFFFF;" id = "b1" controls src = "audio/selectionB.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
< img src = "images/20190128-track-annotated.png" width = "100%" >
< / div >
<!-- have to add id="transcriptWrapper..." -->
< / div >
< / div >
< div class = "tooltip-wrap" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b2" controls src = "audio/description-tommi.mp3" > < / audio > < a href = "" target = "_blank" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b2" controls src = "audio/description-tommi.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
<!-- have to add id="transcriptWrapper..." -->
< div class = 'subB' >
< h3 > Tommi< / h3 >
< div > < a data-start = "12.98" href = "#" > 00:00:12,980< / a > This is some water ** maybe from a fountain< / div >
@ -327,10 +392,10 @@ Oh, I hear children in the background crying</div>
< / div > < / div >
< div class = "tooltip-wrap" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b3" controls src = "audio/description-alex2.mp3" > < / audio > < a href = "" target = "_blank" >
<!-- have to add ontimeupdate="playTranscript3()" -->
< audio style = "width: 100%; background: #222;" id = "b3" controls src = "audio/description-alex2.mp3" > < / audio > < a href = "" target = "_blank" >
< div class = "tooltip-content-up" >
<!-- have to add id="transcriptWrapper..." -->
<!-- have to add id="transcriptWrapper..." -->
< div class = 'subB' >
< h3 > Alex< / h3 >
< div > < a data-start = "7.82" href = "#" > 00:00:07,820< / a > There is teenagers nearby and it's walking< / div >
@ -409,8 +474,53 @@ Oh, I hear children in the background crying</div>
<!-- end draggable -->
< script type = "text/javascript" src = "js/main.js" > < / script >
< script >
var dialogueTimings = [0,8,16,28,33,50,77,120,136],
dialogues = document.querySelectorAll('#transcript>div'),
transcriptWrapper = document.querySelector('#transcriptWrapper'),
audio = document.querySelector('#a2'),
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';
}
}
;
var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
dialogues3 = document.querySelectorAll('#transcript3>div'),
transcriptWrapper3 = document.querySelector('#transcriptWrapper3'),
audio = document.querySelector('#a3'),
previousDialogueTime = -1;
function playTranscript3() {
var currentDialogueTime = Math.max.apply(Math, dialogueTimings3.filter(function(v){return v < = audio.currentTime}));
if(previousDialogueTime !== currentDialogueTime) {
previousDialogueTime = currentDialogueTime;
var currentDialogue = dialogues3[dialogueTimings3.indexOf(currentDialogueTime)];
transcriptWrapper3.scrollTop = currentDialogue.offsetTop - 50;
var previousDialogue = document.getElementsByClassName('speaking3')[0];
if(previousDialogue !== undefined)
previousDialogue.className = previousDialogue.className.replace('speaking3','');
currentDialogue.className +=' speaking3';
}
}
;
< / script >
< / body >
