-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
48 lines (47 loc) · 3.26 KB
/
index.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
<!doctype html>
<html lang="en" class="w-dvw h-dvh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="og:image:width" content="1920">
<meta name="og:image:height" content="961">
<title>Audio Zoom</title>
</head>
<body class="w-dvw h-dvh">
<div id="viewer" class="bg-black w-dvw h-dvh">
<button type="button" id="start" class="bg-center bg-cover bg-no-repeat bg-gray-900 opacity-90 h-full w-full" aria-label="start">
<svg style="width:30%; height:30%; margin:auto;" fill="#FFFFFF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 459 459" xml:space="preserve">
<g>
<g>
<path d="M229.5,0C102.751,0,0,102.751,0,229.5S102.751,459,229.5,459S459,356.249,459,229.5S356.249,0,229.5,0z M310.292,239.651
l-111.764,76.084c-3.761,2.56-8.63,2.831-12.652,0.704c-4.022-2.128-6.538-6.305-6.538-10.855V153.416
c0-4.55,2.516-8.727,6.538-10.855c4.022-2.127,8.891-1.857,12.652,0.704l111.764,76.084c3.359,2.287,5.37,6.087,5.37,10.151
C315.662,233.564,313.652,237.364,310.292,239.651z"/>
</g>
</g>
</svg>
</button>
</div>
<!-- Is initially driven by these audio elements -->
<div id="audio-wrapper" class="hidden">
<audio id="1" src="goldfinch.mp3" data-xywh="17,167,325,346" controls autoplay loop></audio>
<audio id="2" src="robin.mp3" data-xywh="350,173,477,372" controls autoplay loop></audio>
<audio id="3" src="great-tit.mp3" data-xywh="840,131,354,343" controls autoplay loop></audio>
<audio id="4" src="blue-tit.mp3" data-xywh="20,530,354,306" controls autoplay loop></audio>
<audio id="5" src="coal-tit.mp3" data-xywh="400,534,330,266" controls autoplay loop></audio>
<audio id="6" src="blackcap.mp3" data-xywh="792,489,406,423" controls autoplay loop></audio>
<audio id="7" src="bullfinch.mp3" data-xywh="45,833,515,501" controls autoplay loop></audio>
<audio id="8" src="long-tailed-tit.mp3" data-xywh="609,839,204,417" controls autoplay loop></audio>
<audio id="9" src="chaffinch.mp3" data-xywh="38,1292,685,337" controls autoplay loop></audio>
<audio id="10" src="treecreeper.mp3" data-xywh="722,1166,211,469" controls autoplay loop></audio>
<audio id="11" src="nuthatch.mp3" data-xywh="933,1024,251,469" controls autoplay loop></audio>
</div>
<div class="absolute bottom-0 left-0 w-full bg-gray-500 text-white p-3">
<p>Image from <a class="text-green-300 underline" href="https://www.field-studies-council.org/shop/publications/park-and-garden-birds/">Park and garden birds guide</a> illustrated by <a class="text-green-300 underline" href="https://www.illustratedwildlife.com/">Chris Shields</a>, published by the <a class="text-green-300 underline" href="https://www.field-studies-council.org">Field Studies Council</a>.</p>
<p>Birdsong audio from <a class="text-green-300 underline" href="https://rspb.org.uk/birds-and-wildlife/a-z">R.S.P.B website bird identification guide</a>.</p>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>