forked from luiscuenca/Spatial-Audio-API-Examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (86 loc) · 3.97 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
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<script src='https://hifi-spatial-audio-api.s3-us-west-2.amazonaws.com/releases/latest/HighFidelityAudio-latest.js'></script>
<!-- USE THIS IF YOU ARE GOING TO GENERATE A JWT IN index.js:
<script src="https://kjur.github.io/jsrsasign/jsrsasign-latest-all-min.js">
-->
</script>
</head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<lobby id="6023060e-1668-483f-bd6f-e7ff707b8918">
<p>Click on a room to speak with others there:</p>
<room id="bcd48bdf-9a3b-4aec-9dd6-93b10d472318">
<a href="#">Battery</a>
<concurrency>0</concurrency> currently
</room>
<room id="276015f3-889c-4578-8afa-d12edcd0cb6b">
<a href="#">Folsom</a>
<concurrency>0</concurrency> currently
</room>
<room id="e578120d-328c-42ba-a126-7c36b0399fd8">
<a href="#">Langton</a>
<concurrency>0</concurrency> currently
</room>
<room id="TheLobby">Total <total id="totalConcurrency">0</total>, including
<concurrency>0</concurrency> here in <a>the lobby</a>
</room>
<p>You will be asked to allow this app to use your microphone, which is the whole point.</p>
<p>When you get there, everything is drag and drop:
<ul>
<li>Drag your dot to move. You face in the direction that you drag.</li>
<li>Drag in an mp3 to play it from that position, and anyone can drag it around afterwords. Gets deleted when you leave.</li>
<li>Drag an image to be the background (for everyone).</li>
<li>Drag an image onto yourself or anyone's music to be the image.</li>
</ul>
(You can also select an audio or image file by clicking your dot, without dragging.)
</p>
<p>
Beginning several seconds after you speak in a room, you can kick out anyone in that room. You get kicked back here to the lobby (where there is no speaking), and you can rejoin the room, but beware that people can kick you before you have a chance to disrupt.
</p>
<p>This is all done in less about 600 lines of pure Javascript, with no frameworks, and is inspectable in this codepen.</p>
</div>
<template id="mapTemplate">
<map>
<h2>Space...</h2>
<micControls>
<button class="mute"><i class="material-icons">mic</i></button>
<button class="unmute"><i class="material-icons">mic_off</i></button>
<volumeMeter>
<segment class="v10"></segment>
<segment class="v9"></segment>
<segment class="v8"></segment>
<segment class="v7"></segment>
<segment class="v6"></segment>
<segment class="v5"></segment>
<segment class="v4"></segment>
<segment class="v3"></segment>
<segment class="v2"></segment>
<segment class="v1"></segment>
</volumeMeter>
<input type="range" step="0.1" value="1" min="0" max="4">
</micControls>
</map>
</template>
<template id="avatarTemplate">
<avatar>
<arms><reach></reach></arms>
<volume></volume>
<picture>
<nameDisplay></nameDisplay>
<self class="hidden">you <i class="material-icons">open_with</i></self>
<button class="disabled"><i class="material-icons">delete_forever</i></button>
<countdown><span></span>'till user can kick</countdown>
</picture>
</avatar>
</template>
<input type="file" id="filePicker" class="hidden"></input>
<audio autoplay id="player" class="hidden"></audio>
<script src='https://croquet.studio/sdk/croquet-latest.min.js'></script>
<script src='./index.js'></script>
</body>
</html>