-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaudio.html
105 lines (84 loc) · 3.22 KB
/
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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spatial audio</title>
<link rel="stylesheet" type="text/css" href="css/audio.css">
</head>
<body>
<div id="boombox">
<div class="boombox-body">
<div class="bb-front">
<section class="master-controls">
<input type="range" id="volume" class="control-volume" min="0" max="2" value="1" list="gain-vals" step="0.01" data-action="volume" />
<datalist id="gain-vals">
<option value="0" label="min"></option>
<option value="2" label="max"></option>
</datalist>
<label for="volume">VOL</label>
<input type="range" id="panner" class="control-panner" list="pan-vals" min="-1" max="1" value="0" step="0.01" data-action="panner" />
<datalist id="pan-vals">
<option value="-1" label="left"></option>
<option value="1" label="right"></option>
</datalist>
<label for="panner">PAN</label>
<button class="control-power" role="switch" aria-checked="false" data-power="on">
<span>On/Off</span>
</button>
</section>
<section class="tape">
<audio src="assets/guitar.wav" crossorigin="anonymous"></audio>
<button data-playing="false" class="tape-controls-play" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
</section>
</div><!--bb-front-->
<div class="bb-top"></div>
<div class="bb-right"></div>
<div class="bb-bottom"></div>
<div class="bb-left"></div>
<div class="bb-back"></div>
</div><!-- boombox-body -->
</div>
<div id="move-controls" aria-labelledby="move-boombox">
<h3 id="move-boombox">Move Boombox</h3>
<section class="move-controls_xy">
<button data-control="left" aria-labelledby="move-boombox left-label">
<span id="left-label">Left</span>
</button>
<button data-control="up" aria-labelledby="move-boombox up-label">
<span id="up-label">Up</span>
</button>
<button data-control="right" aria-labelledby="move-boombox right-label">
<span id="right-label">Right</span>
</button>
<button data-control="down" aria-labelledby="move-boombox down-label">
<span id="down-label">Down</span>
</button>
</section>
<section class="move-controls_z">
<button data-control="back" aria-labelledby="move-boombox back-label">
<span id="back-label">Back</span>
</button>
<button data-control="forward" aria-labelledby="move-boombox for-label">
<span id="for-label">Forward</span>
</button>
</section>
<section class="move-controls_rotate">
<button data-control="rotate-left" aria-labelledby="move-boombox rleft-label">
<span id="rleft-label">Rotate left</span>
</button>
<button data-control="rotate-down" aria-labelledby="move-boombox rdown-label">
<span id="rdown-label">Rotate downwards</span>
</button>
<button data-control="rotate-right" aria-labelledby="move-boombox rright-label">
<span id="-label">Rotate right</span>
</button>
<button data-control="rotate-up" aria-labelledby="move-boombox rup-label">
<span id="rup-label">Rotate upwards</span>
</button>
</section>
</div>
<script src="js/audio.js"></script>
</body>
</html>