-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspatial_audio_for_desktop.html
168 lines (158 loc) · 5.77 KB
/
spatial_audio_for_desktop.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spatial Audio for Desktop</title>
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="icon" href="icon.png" type="image/x-icon">
<link rel="shortcut icon" href="icon.png" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/orientation.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/web-cam.css">
<link rel="stylesheet" type="text/css" href="semantic/semantic.min.css">
<link rel="stylesheet" href="css/desktop-app.css">
<script src="https://cdn.jsdelivr.net/npm/three@0.106.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/scatter-gl@0.0.1/lib/scatter-gl.min.js"></script>
</head>
<body>
<div class="phoneContent">
<div class="ui mini labeled icon inverted three item top fixed menu">
<a class="item" href="/">
<i class="gray home circle icon"></i>
Home
</a>
<a class="item" href="/spatial_audio_for_phones.html">
<i class="gray mobile alternate icon"></i>
Phones
</a>
<a class="item" href="/spatial_audio_for_desktop.html">
<i class="gray desktop icon"></i>
Desktop
</a>
</div>
</div>
<div class="deskContent">
<div class="ui vertical inverted sidebar menu left visible">
<div class='item'>
<a><b> </b></a>
</div>
<div class='item'>
<a class="ui logo icon image">
<img src="tile.png">
</a>
<a>
<b>Spatial Audio</b>
</a>
</div>
<a class="item" href="/">
Home
<i class="gray home circle large icon"></i>
</a>
<a class="item" href="/spatial_audio_for_phones.html">
For phones only
<i class="gray mobile alternate large icon"></i>
</a>
<a class="item" href="/spatial_audio_for_desktop.html">
For desktop with camera
<i class="gray desktop large icon"></i>
</a>
<div class='item'>
<a><b> </b></a>
</div>
<div class="right menu">
<div class="deskContent">
<a class="ui item" href="https://github.com/bingcheng1998/DSP_Lab_project_spatial_audio">
<div class="teal ui fluid button">
<i class="github icon"></i>Github
</div>
</a>
<a class="ui item" href="https://bingcheng.openmc.cn">
<div class="teal ui fluid button">
<i class="user icon"></i>About Author
</div>
</a>
</div>
</div>
</div>
</div>
<div class=" dimmed">
<div style="color:white"><b>Designed by omniai.org</b></div>
<div class="ui container">
<h1>Spatial Audio for Desktop</h1>
<p>Please use a device with front camera to try this web-app.
</p>
<p>In this Web-App, the user’s head position/direction will be measured with the front camera.
</p>
<p>We recommend you to use headphones for best experience.
</p>
<img class="ui medium centered image" src="img/mesh.jpeg">
</p>
You should see the face mesh in the real-time video, just like the
image shows above. This face mesh model is from this github
<a href="https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection">link</a>.
</p>
<p>You may need to wait for seconds for the inference start process. And it's better to
choose a device that with FPS higher than 15. According to my experience,
phones always works better than desktop computers.</p>
<div id="main">
<div class="container">
<div id="stats" class="stats"></div>
<div class="canvas-wrapper">
<canvas id="output" width="500" height="500" style="border:1px solid"></canvas>
<video id="video" playsinline="" style="
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
visibility: hidden;
width: auto;
height: auto;
" width="500" height="500">
</video>
</div>
<!-- <div id="scatter-gl-container"></div>-->
</div>
</div>
<p>If everything works well, you can start your tour in the spatial audio world!</p>
<div align="center">
<button data-playing="false" id="all" class="controls-play ui labeled icon button" role="switch" aria-checked="false">
<i class="play icon"></i>
<span>Start</span>
</button></div>
</p>
You'll get 3 music track at 3 different places:
</p>
1. <button data-playing="false" id="b1" class="controls-play tiny ui labeled icon button" role="switch" aria-checked="false">
<i class="play icon"></i>
<span>human voice</span>
</button>
in front of you;
</p>
2. <button data-playing="false" id="b2" class="controls-play tiny ui labeled icon button" role="switch" aria-checked="false">
<i class="play icon"></i>
<span> guitar</span>
</button>
at you right hand;
</p>
3. <button data-playing="false" id="b3" class="controls-play tiny ui labeled icon button" role="switch" aria-checked="false">
<i class="play icon"></i>
<span>drums</span>
</button>
at your left hand;
</p>
And it's ok to open only one of them to focus on one channel.
</p>
Now, you are all set! Turn your head left and right to experience spatial audio!
</p>
<pre class="info"></pre>
</div>
</div>
<audio id="a1" src="/assets/human.wav" crossorigin="" loop></audio>
<audio id="a2" src="/assets/guitar.wav" crossorigin="" loop></audio>
<audio id="a3" src="/assets/drums.wav" crossorigin="" loop></audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="/js/desktop_face_orientation.js"></script>
<script src="/js/face_3d_spatial_audio.js"></script>
</body>
</html>