-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathAPI_insert_annotations.html
171 lines (146 loc) · 5.98 KB
/
API_insert_annotations.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>CPU-Audio API example : Insert annotations in panels</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<style>
script.showme {
display : block;
font-family: monospace;
white-space: pre;
}
</style>
<script src="../build/cpu-audio.js" async></script>
<body>
<p><a href="../examples.html">← back to examples list</a></p>
<h1 id="highlighting-text-amond-chapters">CPU-Audio API example : Insert annotations in panels</h1>
<cpu-audio
title="Enjoy the silence">
<audio controls id="sound">
<source src="../tests-assets/blank.mp3" type="audio/mpeg" />
</audio>
</cpu-audio>
<script class="showme">
// In this example, we will create custom time annotations in the player
// First, we'll wait the web-component have created its UI
document.addEventListener('CPU_ready', e => {
// Let's get the <cpu-audio> DOM element
let player_element = e.target;
// Now we want its API
let player_API = player_element.CPU;
// OK, let's create our plane
player_API.addPlane(
'annotations', // named reference
{
title : 'Personal annotations', // Title for the panel
track : false, // Do not show on the timeline
panel : true, // Create a panel
});
// Now, we can insert some points of interest
player_API.addPoint(
'annotations', // named reference for the plane
'note-1', // named reference for the point
{
start : 0, // time position, in seconds
text : '“Enjoy the silence” is the name of a song of Depeche Mode [on click, should go to the time position]',
link : true, // on click, should go to the time position
end : 20 // The point ends at 20 seconds
});
player_API.addPoint(
'annotations',
'note-2', // named reference for the point
{
start : 15, // you can overleap points
text : 'As this song is copyrighted, we used another one [no action on click]',
link : false, // no action on click
end : 40
});
player_API.addPoint(
'annotations',
'note-3', // remember, those names should be unique
{
start : 40,
text : 'an excerpt of “<em>4:33</em>” which is <em>also</em> copyrighted! See link for details! [If link is a string, the url is targeted by your point]', // remember that only a subset of tags may work here
link : 'https://www.classicalmpr.org/blog/classical-notes/2015/12/02/can-silence-be-copyrighted', // If link is a string, the url is targeted by your point
});
// We test a very big panel from pinned parts
player_API.addPlane(
'bigscroll', {title : 'Big long scroll', track : false, panel : true,
});
for (let i=0; i<100 ; i++) {
player_API.addPoint( 'bigscroll', `line-${i}`, {
text : `line number ${i}`,
});
}
});
</script>
<script>
/*
// What about create a second panel ?
player_API.addPlane(
'parameters',
{
title : 'Parameters',
track : false, // Do not show on the timeline
panel : 'nocuetime', // I want a panel with a classname hiding the points times
});
// I need this, it's for a magick trick
let audio_element = document.querySelector('audio');
// And, let's say we want to intercept on each panel redraw ?
// so we add some interactions on them.
document.addEventListener('CPU_drawPoint', (event) => {
//document.addEventListener('change', (event) => {
// console.log(event.target);
//});
// I want the CPU specific informations of those events
let detail = event.detail;
if (detail.plane !== 'parameters') {
// I only wish to change the panel paramemeters actions
return ;
}
// we take the point panel in element
let elementPointPanel = detail.elementPointPanel;
// I need to prevent any drag events, due to some... we'll i keep the surprise
elementPointPanel.draggable = false;
elementPointPanel.querySelector('A').draggable = false;
let input_element = elementPointPanel.querySelector('input');
if (detail.point === 'volume') {
// don't forget to remove this eventListener before putting it again !
let action = function(e) {
audio_element.volume = e.target.value;
}
input_element.removeEventListener('input', action);
input_element.addEventListener('input', action);
}
if (detail.point === 'playbackrate') {
// don't forget to remove this eventListener before putting it again !
let action = function(e) {
audio_element.playbackRate = e.target.value;
}
input_element.removeEventListener('input', action);
input_element.addEventListener('input', action);
}
});
// Let's have a bit of fun
player_API.addPoint(
'parameters',
'volume',
{
start : 0,
text : 'Volume <input id="input_volume" type="range" value="1" min="0" max="1" step="0.1" />', // Yes, I know what I wrote upper, but... let's play !
link : false
});
// Let's have a SECOND bit of fun
player_API.addPoint(
'parameters',
'playbackrate',
{
start : 0,
text : 'Speed <input id="input_rate" type="range" value="1" min="0.5" max="2" step="0.5" />',
link : false
});
// OK. Who still needs a volume and a playrate selector build in the audio player ?
*/
</script>
</body>
</html>