-
Notifications
You must be signed in to change notification settings - Fork 2
/
Usage_controller.html
69 lines (56 loc) · 3.47 KB
/
Usage_controller.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
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<title>CPU-Audio usage example : Usage Controller</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script src="../build/cpu-audio.js" async></script>
<style>
cpu-audio { max-width : 800px; display : inline-block; }
</style>
<body>
<p><a href="../examples.html">← back to examples list</a></p>
<h1>CPU-Audio usage example : Usage Controller</h1>
<p>
At start, a <cpu-controller> without any valid <cpu-audio> should only be a placeholder.
</p>
<cpu-controller hide="poster"></cpu-controller>
<div id="zone">
</div>
<button type="button" id="add">Add a source</button>
</body>
<script>
const sources = [
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/8-AtHalluFMR%2822-10-14%29.mp3', title : 'micro @HalluFMR #8 : Accessible (22/10/2014)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/14-AtHalluFMR%2810-12-14%29.mp3', title : 'micro @HalluFMR #14 : Publicité (10/12/2014)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/15-AtHalluFMR%2817-12-14%29.mp3', title : 'micro @HalluFMR #15 : Péritel (17/12/2014)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/16-AtHalluFMR%2807-01-15%29.mp3', title : 'micro @HalluFMR #16 : Conte (07/01/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/21-AtHalluFMR%2818-02-15%29.mp3', title : 'micro @HalluFMR #21 : Sabotage (18/02/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/24-AtHalluFMR%2811-03-15%29.mp3', title : 'micro @HalluFMR #24 : Automobile (11/03/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/25-AtHalluFMR%2818-03-15%29.mp3', title : 'micro @HalluFMR #25 : Finance (18/03/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/26-AtHalluFMR%2825-03-15%29.mp3', title : 'micro @HalluFMR #26 : Brevet (25/03/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/30-AtHalluFMR%2822-04-15%29.mp3', title : 'micro @HalluFMR #30 : Scam (22/04/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/31-AtHalluFMR%2829-04-15%29.mp3', title : 'micro @HalluFMR #31 : Vidéo (29/04/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/35-AtHalluFMR%2820-05-15%29.mp3', title : 'micro @HalluFMR #35 : Dématérialisation (20/05/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/36-AtHalluFMR%2827-05-15%29.mp3', title : 'micro @HalluFMR #36 : Placebo (27/05/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/38-AtHalluFMR%2810-06-15%29.mp3', title : 'micro @HalluFMR #38 : Sensationnel (10/06/2015)'},
{src : 'https://dascritch.net/vrac/Emissions/AtHalluFMR/podcast/40-AtHalluFMR%2824-06-15%29.mp3', title : 'micro @HalluFMR #40 : Conditions Générales (24/06/2015)'},
];
let i = 0;
const zone = document.querySelector('#zone');
document.querySelector('#add').addEventListener('click', () => {
source = sources[i++];
p = document.createElement('p');
p.innerHTML = `
<cpu-audio title="${source.title}" playlist="unique" hide="poster">
<audio src="${source.src}" controls></audio>
</cpu-audio>
<button type="button" class="remove">×</button>
`;
p.querySelector('.remove').addEventListener('click', ({target}) => { target.closest('p').remove() });
zone.appendChild(p);
if ( i >= sources.length ) {
i = 0;
}
});
</script>
</html>