-
Notifications
You must be signed in to change notification settings - Fork 2
/
API_insert_annotations.html
142 lines (123 loc) · 4.87 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
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>CPU-Audio API example : insert annotations</title>
<script>
// 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.add_plane(
'annotations', // named reference
'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.add_point(
'annotations', // named reference for the plane
0, // time position, in seconds
'note-1', // named reference for the point
{
'text' : '“Enjoy the silence” is the name of a song of Depeche Mode',
'link' : true, // on click, should go to the time position
'end' : 20 // The point ends at 20 seconds
});
player_API.add_point(
'annotations',
15, // you can overleap points
'note-2', // named reference for the point
{
'text' : 'As this song is copyrighted, we used another one',
'link' : false, // no action on click
'end' : 40
});
player_API.add_point(
'annotations',
40,
'note-3', // remember, those names should be unique
{
'text' : 'an excerpt of “<em>4:33</em>” which is <em>also</em> copyrighted! See link for details!', // 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
});
// What about create a second panel ?
player_API.add_plane(
'parameters',
'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_draw_point', (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 element_point_panel = detail.element_point_panel;
// I need to prevent any drag events, due to some... we'll i keep the surprise
element_point_panel.draggable = false;
element_point_panel.querySelector('A').draggable = false;
let input_element = element_point_panel.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.add_point(
'parameters',
0,
'volume',
{
'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.add_point(
'parameters',
0,
'playbackrate',
{
'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>
<script src="../dist/cpu-audio.js" async></script>
<body>
<cpu-audio
title="Enjoy the silence">
<audio controls id="sound">
<source src="../tests-assets/blank.mp3" type="audio/mpeg" />
</audio>
</cpu-audio>
</body>
</html>