forked from cwilso/SynthTemplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (45 loc) · 3.28 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Synth Playground</title>
<!-- Uncomment the following line of code to add Midi support. -->
<!--<script src='http://cwilso.github.com/WebMIDIAPIShim/WebMIDIAPI.js'></script>-->
<script type="text/javascript" src="js/midi.js"></script>
<script type="text/javascript" src="js/synth.js"></script>
<script type="text/javascript" src="js/pointerevents.js"></script>
<style>
body { background-color: #999999; overflow: hidden; font: 12px 'Syncopate', sans-serif;}
#synthbox {
position:relative; width: 910px; height: 380px; background: #222222; border: 3px solid blue; border-radius: 10px}
.loaded#synthbox { border-color: #AAA;}
.error#synthbox { border-color: red;}
#keybox {width:910px; text-align: center;}
#blackkeys { position: absolute; z-index: 2; padding-left: 10px; margin-left: 41px;}
.key { display:inline-block; }
.black { background: black; width: 40px; height: 150px; margin: 0px 11px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.spacer { display:inline-block; width: 62px; height: 150px; margin: }
.white { background: white; width: 60px; height: 250px; border: 1px solid black; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.pressed { background: gray }
#githubnotice { width:910px; text-align: center; font-size: 14px; margin-top: 10px; font-weight: bold;}
#MIDIPlugin { visibility: hidden; }
</style>
</head>
<body>
<!-- Use synthbox div for synth UI if you're making it -->
<div id="synthbox">
<!-- put your synth UI here -->
</div>
<div id="keybox">
<div id="blackkeys">
<span id="k61" class="black key"></span><span id="k63" class="black key"></span><span class="spacer"></span><span id="k66" class="black key"></span><span id="k68" class="black key"></span><span id="k70" class="black key"></span><span class="spacer"></span><span id="k73" class="black key"></span><span id="k75" class="black key"></span><span class="spacer"></span><span id="k78" class="black key"></span><span id="k80" class="black key"></span><span id="k82" class="black key"></span>
</div>
<span id="k60" class="white key"></span><span id="k62" class="white key"></span><span id="k64" class="white key"></span><span id="k65" class="white key"></span><span id="k67" class="white key"></span><span id="k69" class="white key"></span><span id="k71" class="white key"></span><span id="k72" class="white key"></span><span id="k74" class="white key"></span><span id="k76" class="white key"></span><span id="k77" class="white key"></span><span id="k79" class="white key"></span><span id="k81" class="white key"></span><span id="k83" class="white key"></span>
</div>
<div id="webaudiosynthcredit">Thanks to Chris Wilson for this awesome <a href="http://github.com/cwilso/SynthTemplate/">Web Audio API Synth Template</a>!</div>
<!-- Uncomment the following two lines for using a live midi input -->
<!-- <select id="midiIn"><option>-no MIDI-</option></select>
<select id="kbd_oct"><option>+3</option><option>+2</option><option>+1</option><option selected>normal</option><option>-1</option><option>-2</option><option>-3</option></select>
<div id="MIDIPlugin"></div> -->
</body>
</html>