Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

edit player

Browse Source
master
Angeliki 6 years ago
parent 49c6c37a42
commit e4aa5fcf89
3 changed files with 51 additions and 29 deletions
Show Stats Download Patch File Download Diff File

2
index.php
Unescape Escape View File

@ -45,7 +45,7 @@
<div class="tooltip-wrap"> <div class="tooltip-wrap">
Listen to the latest podcast: Listen to the latest podcast:
<div class="tooltip-content"> <div class="tooltip-content-down">
<div id="transcriptWrapper" class='sub'> <div id="transcriptWrapper" class='sub'>
<div id="transcript"> <div id="transcript">
<div><a data-start="10.56" href="#">00:00:10,560</a> A woman speaks in Indonesian</div> <div><a data-start="10.56" href="#">00:00:10,560</a> A woman speaks in Indonesian</div>

50
project/player.html
Unescape Escape View File

@ -5,6 +5,7 @@
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
<div class="short-description"> <div class="short-description">
<p> <p>
@ -39,12 +40,12 @@
<!-- recordings --> <!-- recordings -->
<section> <section>
<div style="position:absolute; top:15%; left:41%;"> <div style="position:absolute; top:15%; left:41%;">
<audio controls style="background-color: tomato;" src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal <audio controls src="audio/leeszaal-meetings-warming.mp3"></audio>warming up @Leeszaal
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;"> <div class="tooltip-wrap" style="position:absolute; top:12%; left:51%;">
<audio controls style="background-color: orange;" src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal <audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
<div class="tooltip-content"> <div class="tooltip-content-down">
<div class="row"> <div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px" /> <div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px" />
</div> </div>
@ -55,17 +56,17 @@
<div style="position:absolute; top:20%; left:63%;"> <div style="position:absolute; top:20%; left:63%;">
<audio controls style="background-color: dodgerblue;" src="audio/description-alex2.mp3"></audio>describing/annotating <audio controls src="audio/description-alex2.mp3"></audio>describing/annotating
</div> </div>
<div style="position:absolute; top:30%; left:70%;"> <div style="position:absolute; top:30%; left:70%;">
<audio controls style="background-color: mediumseagreen;" src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts <audio controls src="audio/finearts-meeting-discussion.mp3"></audio>discussing about voice in public @Fine Arts
</div> </div>
<div style="position:absolute; top:42%; left:75%;"> <div style="position:absolute; top:42%; left:75%;">
<audio controls style="background-color: violet;" src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal <audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio>transcribing vowels @Leeszaal
</div> </div>
<div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;"> <div class="tooltip-wrap" style="position:absolute; top:55%; left:69%;">
<audio controls style="background-color: orange;" src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts <audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
<div class="tooltip-content"> <div class="tooltip-content-up">
<div class="row"> <div class="row">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" /> <div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" />
</div> </div>
@ -76,31 +77,31 @@
<div style="position:absolute; top:65%; left:63%;"> <div style="position:absolute; top:65%; left:63%;">
<audio controls style="background-color: greenyellow;" src="audio/selectionB.mp3"></audio>city sounds <audio controls src="audio/selectionB.mp3"></audio>city sounds
</div> </div>
<div style="position:absolute; top:70%; left:53%;"> <div style="position:absolute; top:70%; left:53%;">
<audio controls style="background-color: dodgerblue;" src="audio/description-eugenie-CUT-SHORT.mp3"></audio>describing/annotating <audio controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio>describing/annotating
</div> </div>
<div style="position:absolute; top:57%; left:33%;;"> <div style="position:absolute; top:57%; left:33%;;">
<audio controls style="background-color: orange;" src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts <audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio>singing vowels (high) @Fine Arts
</div> </div>
<div style="position:absolute; top:33%; left:26%;;"> <div style="position:absolute; top:33%; left:26%;;">
<audio controls style="background-color: dodgerblue;" src="audio/description-lidia-CUT.mp3"></audio>describing/annotating <audio controls src="audio/description-lidia-CUT.mp3"></audio>describing/annotating
</div> </div>
<div style="position:absolute; top:46%; left:28%;;"> <div style="position:absolute; top:46%; left:28%;;">
<audio controls style="background-color: mediumseagreen;" src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal <audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio>discussing about voice in public @Leeszaal
</div> </div>
<div style="position:absolute; top:66%; left:41%;;"> <div style="position:absolute; top:66%; left:41%;;">
<audio controls style="background-color: tomato;" src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts <audio controls src="audio/finearts-meeting-warming.mp3"></audio>warming up @Fine Arts
</div> </div>
<div style="position:absolute; top:23%; left:32%;"> <div style="position:absolute; top:23%; left:32%;">
<audio controls style="background-color: violet;" src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts <audio controls src="audio/finearts-meeting-transcribing.mp3"></audio>transcribing vowels @Fine Arts
</div> </div>
<div style="position:absolute; top:27%; left:29%;"> <div style="position:absolute; top:27%; left:29%;">
<audio controls style="background-color: violet;" src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts <audio controls src="audio/finearts-meeting-extracts.mp3"></audio>reading extracts @Fine Arts
</div> </div>
</section> </section>
@ -111,8 +112,8 @@
<section style="margin-top: 700px !important;"> <section style="margin-top: 700px !important;">
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%; background: none;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div> <div>selection of recordings while wandering around Leeszaal</div>
</div> </div>
@ -120,7 +121,7 @@
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3"></audio> <audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<div id="transcriptWrapper" class='sub'> <div id="transcriptWrapper" class='sub'>
<h3>Lidia</h3> <h3>Lidia</h3>
<div id="transcript"> <div id="transcript">
@ -139,7 +140,7 @@
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio> <audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<div id="transcriptWrapper3" class='sub'> <div id="transcriptWrapper3" class='sub'>
<h3>Eugenie</h3> <h3>Eugenie</h3>
<div id="transcript3"> <div id="transcript3">
@ -162,7 +163,7 @@
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio> <audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='sub'> <div class='sub'>
<h3>Alex</h3> <h3>Alex</h3>
@ -194,7 +195,7 @@ Oh, I hear children in the background crying</div>
<!-- second sounwalk player --> <!-- second sounwalk player -->
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio> <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div> <div>selection of recordings while wandering around Leeszaal</div>
</div> </div>
@ -203,7 +204,7 @@ Oh, I hear children in the background crying</div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio> <audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
<h3>Tommi</h3> <h3>Tommi</h3>
@ -231,7 +232,7 @@ Oh, I hear children in the background crying</div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio> <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio>
<div class="tooltip-content"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
<h3>Alex</h3> <h3>Alex</h3>
@ -467,6 +468,7 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
; ;
</script> </script>
</body> </body>
</html> </html>

28
project/styles/stylesheet.css
Unescape Escape View File

@ -1,4 +1,4 @@
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;} body {font-family: "Old Standard TT"; font-size: 20px; line-height: 2.5; letter-spacing: 1px;}
section {margin-bottom: 50px;margin-top: 20px;} section {margin-bottom: 50px;margin-top: 20px;}
a {font-weight: bold; text-decoration: none; } a {font-weight: bold; text-decoration: none; }
h2 { h2 {
@ -263,10 +263,26 @@ cursor: pointer;
.tooltip-wrap { .tooltip-wrap {
position: relative; position: relative;
} }
.tooltip-wrap .tooltip-content { .tooltip-wrap .tooltip-content-down {
display: none; display: none;
position: absolute; position: absolute;
/*top: 20%;*/ z-index:1;
top: 100%;
/*bottom: 100%;*/
left: 2%;
/*right: 100%;*/
padding: .5em;
background-color: rgba(255, 255, 255, 0.9) ;
border:1px;
border-style:solid;
border-color:black;
}
.tooltip-wrap .tooltip-content-up {
display: none;
position: absolute;
z-index:1;
/*top: 100%;*/
bottom: 100%; bottom: 100%;
left: 2%; left: 2%;
/*right: 100%;*/ /*right: 100%;*/
@ -277,10 +293,14 @@ cursor: pointer;
border-color:black; border-color:black;
} }
.tooltip-wrap:hover .tooltip-content { .tooltip-wrap:hover .tooltip-content-down {
display: block;
}
.tooltip-wrap:hover .tooltip-content-up {
display: block; display: block;
} }
/*transcript wrapper,text following audio style*/ /*transcript wrapper,text following audio style*/
#transcriptWrapper { #transcriptWrapper {

Write Preview
Loading…
Cancel
Save