-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmulti_3d_spatial_audio.html
60 lines (53 loc) · 1.87 KB
/
multi_3d_spatial_audio.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-3D Spatial audio</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/orientation.css">
<meta name="theme-color" content="#fafafa">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1 id="move-boombox">Multi-3D Spatial Audio</h1>
<div class="ios_access"></div>
<script src="js/ios_access.js"></script>
<button data-playing="false" id="all" class="controls-play" role="switch" aria-checked="false">
<span>all: Play/Pause</span>
</button>
</p>
Please click ⬆️ this button to start the program.
</p>
You'll get 3 music track at 3 different places:
</p>
<button data-playing="false" id="b1" class="controls-play" role="switch" aria-checked="false">
<span>1: Play/Pause (human voice)</span>
</button>
in front of you
</p>
<button data-playing="false" id="b2" class="controls-play" role="switch" aria-checked="false">
<span>2: Play/Pause (guitar)</span>
</button>
at you right hand
</p>
<button data-playing="false" id="b3" class="controls-play" role="switch" aria-checked="false">
<span>3: Play/Pause (drums)</span>
</button>
at your left hand
</p>
And you can close one or two of them to focus on one channel.
<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>
<div class="garden">
<div class="ball indicator">
<div class="human">human</div>
<div class="guitar">guitar</div>
<div class="drums">drums</div>
<img class="arrow" src="img/3d-up-arrow.svg" alt="Kiwi standing on oval">
</div>
</div>
<pre class="info"></pre>
<script src="js/multi_3d_spatial_audio.js"></script>
</body>
</html>