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

edit player

Browse Source
master
Angeliki 5 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">
Listen to the latest podcast:
<div class="tooltip-content">
<div class="tooltip-content-down">
<div id="transcriptWrapper" class='sub'>
<div id="transcript">
<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">
</head>
<body>
<div class="short-description">
<p>
@ -39,12 +40,12 @@
<!-- recordings -->
<section>
<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 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
<div class="tooltip-content">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio>singing vowels @Leeszaal
<div class="tooltip-content-down">
<div class="row">
<div class="column"><img src="images/vowels-20190328-leeszaal.jpg" width="500px" />
</div>
@ -55,17 +56,17 @@
<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 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 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 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
<div class="tooltip-content">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio>singing vowels @Fine Arts
<div class="tooltip-content-up">
<div class="row">
<div class="column"><img src="images/vowels-20190329-finearts.jpg" width="500px" />
</div>
@ -76,31 +77,31 @@
<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 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 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 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 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 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 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 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>
</section>
@ -111,8 +112,8 @@
<section style="margin-top: 700px !important;">
<div class="tooltip-wrap">
<audio style="width: 100%; background: none;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio>
<div class="tooltip-content">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio>
<div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div>
</div>
@ -120,7 +121,7 @@
<div class="tooltip-wrap">
<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'>
<h3>Lidia</h3>
<div id="transcript">
@ -139,7 +140,7 @@
<div class="tooltip-wrap">
<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'>
<h3>Eugenie</h3>
<div id="transcript3">
@ -162,7 +163,7 @@
<div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" -->
<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..." -->
<div class='sub'>
<h3>Alex</h3>
@ -194,7 +195,7 @@ 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>
<div class="tooltip-content">
<div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div>
</div>
@ -203,7 +204,7 @@ Oh, I hear children in the background crying</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>
<div class="tooltip-content">
<div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." -->
<div class='subB'>
<h3>Tommi</h3>
@ -231,7 +232,7 @@ Oh, I hear children in the background crying</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>
<div class="tooltip-content">
<div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." -->
<div class='subB'>
<h3>Alex</h3>
@ -467,6 +468,7 @@ var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
;
</script>
</body>
</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;}
a {font-weight: bold; text-decoration: none; }
h2 {
@ -263,10 +263,26 @@ cursor: pointer;
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content {
.tooltip-wrap .tooltip-content-down {
display: none;
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%;
left: 2%;
/*right: 100%;*/
@ -277,9 +293,13 @@ cursor: pointer;
border-color:black;
}
.tooltip-wrap:hover .tooltip-content {
.tooltip-wrap:hover .tooltip-content-down {
display: block;
}
.tooltip-wrap:hover .tooltip-content-up {
display: block;
}
/*transcript wrapper,text following audio style*/

Write Preview
Loading…
Cancel
Save