Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
10
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
ℹ️❤️🖥
Explorable-Podcast-Proof-of-Concept
Commits
9fa663a6
Commit
9fa663a6
authored
Sep 06, 2017
by
i❤computers
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Allow for second cues track referencing named cue position
parent
12138d0a
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
56 additions
and
39 deletions
+56
-39
index.html
index.html
+6
-6
script.js
script.js
+50
-33
No files found.
index.html
View file @
9fa663a6
...
...
@@ -213,13 +213,13 @@
<svg
id=
"flag"
width=
"100%"
height=
"100%"
viewBox=
"0 0 720 480"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xml:space=
"preserve"
style=
"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
>
<path
d=
"M0,0l720,0l0,480l-720,0l0,-480Z"
style=
"fill:#fff;fill-rule:nonzero;"
></path>
<rect
x=
"0"
y=
"80"
width=
"720"
height=
"80"
style=
"fill:#b3ddf2;"
></rect>
<rect
i
d=
"topWipe"
class=
"wipes"
x=
"0"
y=
"75"
width=
"720"
height=
"90"
style=
"fill:#FFF;"
></rect>
<rect
d
ata-cue-position
=
"topWipe"
class=
"wipes"
x=
"0"
y=
"75"
width=
"720"
height=
"90"
style=
"fill:#FFF;"
></rect>
<rect
x=
"0"
y=
"320"
width=
"720"
height=
"80"
style=
"fill:#b3ddf2;"
></rect>
<rect
i
d=
"bottomWipe"
class=
"wipes"
x=
"0"
y=
"315"
width=
"720"
height=
"90"
style=
"fill:#FFF;"
></rect>
<path
i
d=
"firstStar"
class=
"star"
d=
"M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
i
d=
"secondStar"
class=
"star"
d=
"M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
i
d=
"thirdStar"
class=
"star"
d=
"M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
i
d=
"fourthStar"
class=
"star"
d=
"M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<rect
d
ata-cue-position
=
"bottomWipe"
class=
"wipes"
x=
"0"
y=
"315"
width=
"720"
height=
"90"
style=
"fill:#FFF;"
></rect>
<path
d
ata-cue-position
=
"firstStar"
class=
"star"
d=
"M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
d
ata-cue-position
=
"secondStar"
class=
"star"
d=
"M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
d
ata-cue-position
=
"thirdStar"
class=
"star"
d=
"M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
<path
d
ata-cue-position
=
"fourthStar"
class=
"star"
d=
"M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"
style=
"fill:#f00;fill-rule:nonzero;"
></path>
</svg>
<figcaption>
Figure 1. Flag of Chicago, Illinois.
<a
href=
"https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg"
>
Source: Wikipedia
</a>
...
...
script.js
View file @
9fa663a6
...
...
@@ -3,16 +3,40 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
var
audio
=
document
.
getElementById
(
'
excerpt
'
);
var
cues
=
[
0.33
,
0.57
,
0.71
,
1.38
,
2.17
,
2.36
,
2.64
,
3.88
,
4.02
,
4.32
,
4.65
,
5.1
,
5.27
,
5.52
,
5.92
,
6.28
,
6.55
,
7.37
,
8.62
,
9.48
,
10.09
,
10.36
,
11.01
,
11.82
,
12.32
,
13.15
,
13.72
,
14.01
,
14.19
,
14.65
,
15.03
,
15.37
,
15.72
,
16.14
,
16.44
,
16.74
,
17.53
,
17.91
,
18.23
,
18.9
,
19.16
,
19.52
,
20.02
,
21.29
,
21.65
,
21.94
,
22.46
,
23.28
,
23.63
,
23.88
,
24.46
,
24.75
,
25.09
,
25.59
,
26.0
,
26.48
,
26.96
,
27.26
,
27.77
,
28.21
,
28.74
,
29.58
,
30.8
,
31.58
,
32.4
,
32.77
,
33.09
,
33.82
,
34.44
,
34.68
,
35.39
,
35.89
,
36.28
,
37.03
,
37.47
,
37.97
,
38.23
,
38.63
,
39.92
,
40.18
,
41.08
,
42.11
,
43.16
,
43.64
,
44.27
,
45.1
,
45.45
,
46.09
,
46.6
,
46.87
,
47.23
,
48.06
,
48.37
,
48.91
,
49.32
,
49.76
,
50.16
,
50.52
,
50.76
,
51.04
,
51.7
,
52.44
,
53.38
,
54.3
,
54.58
,
55.04
,
55.71
,
56.16
,
56.49
,
57.02
,
57.88
,
58.46
,
59.02
,
59.45
,
60.02
];
var
transcriptCuesTrack
=
[
0.33
,
0.57
,
0.71
,
1.38
,
2.17
,
2.36
,
2.64
,
3.88
,
4.02
,
4.32
,
4.65
,
5.1
,
5.27
,
5.52
,
5.92
,
6.28
,
6.55
,
7.37
,
8.62
,
9.48
,
10.09
,
10.36
,
11.01
,
11.82
,
12.32
,
13.15
,
13.72
,
14.01
,
14.19
,
14.65
,
15.03
,
15.37
,
15.72
,
16.14
,
16.44
,
16.74
,
17.53
,
17.91
,
18.23
,
18.9
,
19.16
,
19.52
,
20.02
,
21.29
,
21.65
,
21.94
,
22.46
,
23.28
,
23.63
,
23.88
,
24.46
,
24.75
,
25.09
,
25.59
,
26.0
,
26.48
,
26.96
,
27.26
,
27.77
,
28.21
,
28.74
,
29.58
,
30.8
,
31.58
,
32.4
,
32.77
,
33.09
,
33.82
,
34.44
,
34.68
,
35.39
,
35.89
,
36.28
,
37.03
,
37.47
,
37.97
,
38.23
,
38.63
,
39.92
,
40.18
,
41.08
,
42.11
,
43.16
,
43.64
,
44.27
,
45.1
,
45.45
,
46.09
,
46.6
,
46.87
,
47.23
,
48.06
,
48.37
,
48.91
,
49.32
,
49.76
,
50.16
,
50.52
,
50.76
,
51.04
,
51.7
,
52.44
,
53.38
,
54.3
,
54.58
,
55.04
,
55.71
,
56.16
,
56.49
,
57.02
,
57.88
,
58.46
,
59.02
,
59.45
,
60.02
];
var
visualCuesTrack
=
[
{
cueTime
:
44.37
,
cuePositionName
:
"
topWipe
"
},
{
cueTime
:
45.14
,
cuePositionName
:
"
bottomWipe
"
},
{
cueTime
:
49
,
cuePositionName
:
"
firstStar
"
},
{
cueTime
:
49.25
,
cuePositionName
:
"
secondStar
"
},
{
cueTime
:
49.50
,
cuePositionName
:
"
thirdStar
"
},
{
cueTime
:
49.75
,
cuePositionName
:
"
fourthStar
"
}
];
var
MAX_TRANSITION_TIME
=
0.4
;
//make sure transition time matches in index.html's styling
var
cue_position_selector
=
function
(
index
)
{
return
"
[data-cue-position='
"
+
index
+
"
']
"
};
cues
.
forEach
(
function
setTransitionTimes
(
cue
,
index
)
{
if
(
index
+
1
===
cues
.
length
)
{
transcriptCuesTrack
.
forEach
(
function
setTransitionTimes
(
cue
,
index
)
{
if
(
index
+
1
===
transcriptCuesTrack
.
length
)
{
return
;
}
var
cueDuration
=
cues
[
index
+
1
]
-
cue
;
var
cueDuration
=
transcriptCuesTrack
[
index
+
1
]
-
cue
;
if
(
cueDuration
<
MAX_TRANSITION_TIME
)
{
$
(
cue_position_selector
(
index
)).
forEach
(
function
(
cueElement
)
{
cueElement
.
style
.
transitionDuration
=
cueDuration
+
"
s
"
;
...
...
@@ -32,7 +56,8 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
});
audio
.
on
(
'
ended
'
,
resetPlayer
);
var
currentIndex
=
0
;
var
currentTranscriptIndex
=
0
;
var
currentVisualIndex
=
0
;
var
HIGHLIGHTED_CLASS
=
"
highlighted
"
;
function
updateHighlight
()
{
...
...
@@ -40,39 +65,31 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
return
;
}
if
(
audio
.
currentTime
>=
cues
[
currentIndex
])
{
$
(
cue_position_selector
(
currentIndex
)).
forEach
(
function
(
cueElement
)
{
cueElement
.
classList
.
add
(
HIGHLIGHTED_CLASS
);
});
currentIndex
++
;
}
if
(
audio
.
currentTime
>=
44.37
)
{
document
.
getElementById
(
"
topWipe
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
}
if
(
audio
.
currentTime
>=
45.14
)
{
document
.
getElementById
(
"
bottomWipe
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
}
if
(
audio
.
currentTime
>=
49.00
)
{
document
.
getElementById
(
"
firstStar
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
if
(
audio
.
currentTime
>=
transcriptCuesTrack
[
currentTranscriptIndex
])
{
$
(
cue_position_selector
(
currentTranscriptIndex
)).
forEach
(
addHighlightClass
);
currentTranscriptIndex
++
;
}
if
(
audio
.
currentTime
>=
49.25
)
{
document
.
getElementById
(
"
secondStar
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
}
if
(
audio
.
currentTime
>=
49.50
)
{
document
.
getElementById
(
"
thirdStar
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
}
if
(
audio
.
currentTime
>=
49.75
)
{
document
.
getElementById
(
"
fourthStar
"
).
classList
.
add
(
HIGHLIGHTED_CLASS
);
if
(
visualCuesTrack
[
currentVisualIndex
]
&&
audio
.
currentTime
>=
visualCuesTrack
[
currentVisualIndex
].
cueTime
)
{
$
(
cue_position_selector
(
visualCuesTrack
[
currentVisualIndex
].
cuePositionName
)).
forEach
(
addHighlightClass
);
currentVisualIndex
++
;
}
requestAnimationFrame
(
updateHighlight
);
}
function
cue_position_selector
(
id
)
{
return
"
[data-cue-position='
"
+
id
+
"
']
"
}
function
addHighlightClass
(
$cueElement
)
{
$cueElement
.
classList
.
add
(
HIGHLIGHTED_CLASS
);
}
function
resetPlayer
()
{
audio
.
currentTime
=
0
;
currentIndex
=
0
;
$
(
"
.
"
+
HIGHLIGHTED_CLASS
).
forEach
(
function
removeHighlights
(
highlightedElement
)
{
currentTranscriptIndex
=
0
;
currentVisualIndex
=
0
;
$
(
"
.
"
+
HIGHLIGHTED_CLASS
).
forEach
(
function
removeHighlightClass
(
highlightedElement
)
{
highlightedElement
.
classList
.
remove
(
HIGHLIGHTED_CLASS
);
});
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment