-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (86 loc) · 2.91 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
<head>
<!-- Loads in custom Google Fonts -->
<script src="webfonts.js"></script>
<!-- Loads Custom Stylesheet -->
<link rel="stylesheet" href="style.css" />
<!-- Loads Custom Favicon -->
<link rel="icon" type="image/ico" href="favicon.ico" />
<!-- Loads Daniel Guerrero's "Base64Binary," a library to decode 64bit Strings as audio data -->
<script type="text/javascript" src="base64-binary.js"></script>
<!-- Loads 4 original audio files encoded as 64-bit strings -->
<script type="text/javascript" src="audio-data.js"></script>
<!-- Script handling the bulk of our audio processessing -->
<script type="text/javascript" src="audio-buffer-playback.js"></script>
<!-- Loads Chris Wilson's "Audio Context Monkey," a library that "downgrades"
our Web Audio code for standards-noncompliant browsers (namely Safari) -->
<script src ="http://cwilso.github.com/AudioContext-MonkeyPatch/AudioContextMonkeyPatch.js"></script>
<title>3D Audio Simulation with Web Audio</title>
</head>
<body>
<header>
<h1>3D Audio Simulation with Web Audio</h1>
<p>Rotating Binaural Audio from Single Stereo Source</p>
</header>
<div id="interface">
Sound File:
<select id="trackList">
<option value="channelTest" selected>Spoken Channel Test</option>
<option value="pianoChime">Piano Chime</option>
<option value="dualSpires">Walking Bass</option>
<option value="glassWoodTap">Glass & Wood Noises</option>
</select>
<button id="playButton">Play</button>
<button id="stopButton">Stop</button>
<span class="checkbox" display="inline">
<input id="loopOption" type="checkbox" checked><label for="loopOption"> Loop</label>
</span>
<br>
<div id = "sliders">
Volume:
<input id="volumeBar" type="range" min="0" max="1" step="0.1" value="1" />
Manual Pan:
<input id="panBar" type="range" min="-1" max="1" step="0.1" value="0" />
</div>
<span class="radio">
<form>
<input type="radio" name="panOpt" id="manPanOpt" value="manPan"><label for="manPanOpt">Manual Pan</label>
<input type="radio" name="panOpt" id="autoPanOpt" value="autoPan" checked><label for="autoPanOpt">Auto Pan</label>
</form>
</span>
<br>
<div id="non-ui">
Auto Pan Angle (Degrees):
<span id="timerSpace"></span>
<br>Right Channel X-Coordinate:
<span id="xCoordR"></span>
<br>Left Channel X-Coordinate:
<span id="xCoordL"></span>
<br>Anchored Z-Coordinate:
<span id="zCoord"></span>
</div>
<!-- End interface div -->
</div>
<div id="desc">
<p>
<i>The sounds I've prepared have unique aspects
<br>differentiating each stereo audio channel.
<br>Listen closely to how panning affects this!</i>
</p>
</div>
<!-- Initializes environment -->
<script type="text/javascript" src="inits.js"></script>
<!--
Once environment is initialized, tests to make sure user-
agent is a supported browser; throws an error if not
(This must happen *after* other inits are complete)
-->
<script>browserCheck();</script>
<footer>
©2015 Patrick Mauro
</footer>
</body>
</html>