-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathStyle_highlight_page_chapters.html
113 lines (97 loc) · 6.1 KB
/
Style_highlight_page_chapters.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>CPU-Audio style example : Highlight page chapters</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="../build/cpu-audio.js" async></script>
<style>
/*
For each reached chapter, declare which chapters must be hightlighted.
During a chapter, the cpu-audio player will add specific class on document <body> tag, as here :
.cpu_playing_tag_«highlights»_cue_«chap-1»
- «highlights» refers to the Id of the <audio id="highlights" controls> tag
- «chap-1» is the cue name, in the "../tests-assets/chapters-ex0085.vtt" file
- syntax seems strange, but those characters are valids, per https://www.w3.org/TR/CSS21/syndata.html#characters
*/
#demo li {
padding : 5px;
margin : 5px;
}
/*
in-text chapters in standby mode
*/
#demo li {
opacity : 0.5;
}
/*
in-text chapters during chapter playing. Sorry, this is verbose
*/
.cpu_playing_tag_«highlights»_cue_«chap-1» #highlights_c1,
.cpu_playing_tag_«highlights»_cue_«chap-2» #highlights_c2,
.cpu_playing_tag_«highlights»_cue_«chap-3» #highlights_c3,
.cpu_playing_tag_«highlights»_cue_«chap-4» #highlights_c4,
.cpu_playing_tag_«highlights»_cue_«chap-5» #highlights_c5,
.cpu_playing_tag_«highlights»_cue_«chap-6» #highlights_c6,
.cpu_playing_tag_«highlights»_cue_«chap-7» #highlights_c7,
.cpu_playing_tag_«highlights»_cue_«chap-8» #highlights_c8,
.cpu_playing_tag_«highlights»_cue_«chap-9» #highlights_c9,
.cpu_playing_tag_«highlights»_cue_«chap-10» #highlights_c10 {
opacity : 1;
background : #ddd;
outline : 1px solid black;
}
</style>
<body>
<p><a href="../examples.html">← back to examples list</a></p>
<h1 id="highlighting-text-amond-chapters">CPU-Audio Style example : Highlighting text amond chapters</h1>
<p>In this example, elements of the host page are highlighted when the player show some chapters, with only CSS and HTML.</p>
<p>
Please note : This example must be run in a web server, not via file:/// protocol, due to CSP/CORS requirements from browsers. Please note that obviously a chapter track is unuseful for a live streamed audio.<br />
Also note that the class is set when the page is loaded and before the element is playing only if the audio id is expressed in the hash url
</p>
<details>
<summary>Technical explanations</summary>
<p>
If you use a chapter track with name chapters <a href="applications/chapters_editor.html">(you can generate them here)</a>, you can use a CSS rule to highlight a portion of your text with the playing audio.
</p>
<p>
This feature works if a chapter <track> is correctly loaded and interpreted by cpu-audio. Once loaded interpreted, you can hide chapter panel and tracks in the player (with hide="chapters panels"), the feature and so the css effects will still work.
</p>
<p>
The context-style feature was inspired by the now defunct BBC mini website hommage to their 1980s TV show about computers.
</p>
</details>
<hr />
<cpu-audio title="Ex0085 Le Mystère Enigma" poster="https://cpu.dascritch.net/public/Images/Emissions/.1805-Ex0085-Enigma_m.jpg" canonical="https://cpu.dascritch.net/post/2018/05/17/Ex0085-Histoires-de-la-cryptographie%2C-2%C3%A8me-partie-%3A-Le-myst%C3%A8re-d-Enigma" twitter="@cpuprogramme">
<audio id="highlights" data-title="Ex0085 Le Mystère Enigma" data-poster="https://cpu.dascritch.net/public/Images/Emissions/.1805-Ex0085-Enigma_m.jpg" data-canonical="https://cpu.dascritch.net/post/2018/05/17/Ex0085-Histoires-de-la-cryptographie%2C-2%C3%A8me-partie-%3A-Le-myst%C3%A8re-d-Enigma" data-twitter="@cpuprogramme" controls>
<!-- source src="https://cpu.dascritch.net/public/Sonores/Emissions/hls/0085-CPU%2817-05-18%29/index.m3u8" type="application/x-mpegurl" / Not existing on server. i'll fix it later -->
<source src="https://dascritch.net/vrac/Emissions/CPU/0085-CPU%2817-05-18%29.ogg" type="audio/ogg">
<source src="https://dascritch.net/vrac/Emissions/CPU/podcast/0085-CPU%2817-05-18%29.mp3" type="audio/mpeg">
<track kind="chapters" src="../tests-assets/chapters-ex0085.vtt" default="">
</audio>
<!-- Fallback messages -->
<div class="cpu-audio-without-webcomponents too-old">
<h2>Player didn't start (yet ?)</h2>
<p>
Your browser is loading very slowly, or doesn't support WebComponent fairly enough.
Following examples are <strong>not fully functionnal</strong>, as the interface is not shown and the browser display its native player. This is intentional.<br>
Only the hash-links functions works.
</p>
</div>
</cpu-audio>
<div id="demo">
<ul>
<li id="highlights_c1"><a href="#highlights&t=1m17s">Bonjour à toi, Enfant du Futur Immédiat : Des chiffres et des lettres</a></li>
<li id="highlights_c2"><a href="#highlights&t=6m28s">Lexique : Casser un chiffrement</a></li>
<li id="highlights_c3">music. joke intented by the song name</li>
<li id="highlights_c4"><a href="#highlights&t=12m45s">Plantage : La chute de l'Empire du chiffre Allemand</a></li>
<li id="highlights_c5"><a href="#highlights&t=20m45s">Artefact du passé : La machine Enigma</a></li>
<li id="highlights_c6">music. French band name, spanish song name, german lyrics</li>
<li id="highlights_c7"><a href="#highlights&t=33m19s">Histoire : Les génies du Biuro Szyfrów</a></li>
<li id="highlights_c8"><a href="#highlights&t=38m35s">Ainsi naquit : Bletchley Park, le premier campus technologique</a></li>
<li id="highlights_c9">music. Obligatory musical reference to the Turing biopic</li>
<li id="highlights_c10"><a href="#highlights&t=50m03s">Le Gourou : Alan Turing</a></li>
</ul>
</div>
</body>
</html>