-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
84 lines (66 loc) · 3.99 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
<html>
<head>
<meta charset="utf-8">
<title>Web MIDI API Wrapper Demo</title>
<style tyle="text/css">
body{ margin:20px; font-family:Helvetica; font-size:0.85em; }
</style>
</head>
<body>
<h1>Web MIDI API Wrapper Demo</h1>
<h2 id="toparsemidi">[TO PARSE MIDI MESSAGE]</h2>
<div id="parseMIDIMsg">To test parse MIDI message</div>
<div id="midiMsgTextBox"></div>
<div><div id="result" style="background-color:#efefef; border: 1px solid rgb(175, 175, 175); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; height: 200px; width: 400px; word-wrap: break-word; overflow: auto; font-family: monospace;"">(Result Area)</textarea></div>
<br>
<h2 id="tosendmidi">[TO SEND MIDI MESSAGE]</h2>
<h3 id="errorText" style="visibility:hidden; color:red; border: 2px solid #ffa500; border-radius:4px;background-color:#fffacd; padding: 5px;"></h3>
<h3 id="devicesText" style="margin:0px; visibility:hidden;">[Select your device]</h3>
<div id="midiInDevices"></div>
<div id="midiOutDevices"></div>
<br>
<div id="fireTriText" style="visibility:hidden;">You might know this sound.</div>
<div><span id="fireTri"></span></div>
<br>
<h3 id="prgChangeText" style="margin: 0px; visibility:hidden;">[Play sound with ProgramChange]</h3>
<div id="prgChangeText01" style="visibility:hidden;">Select a voice to try lestening sound with your favorite voice!!</div>
<div id="control" style="visibility:hidden;">MIDI Ch: <span id="changeCh"></span></div>
<div><span id="prgChange"></span><span id="voicename" style="margin: 0px 5px;"></span></div>
<div id="midiFireButton" style="float:left;"></div>
<div style="float:left;"><span id="sustainFireButton"></span><span id="sustainvalue"></span></div>
<div style="float:left;"><span id="bendFireButton"></span><span id="bendvalue" style="margin: 0px 5px;"></span></div>
<div style="float:left;"><span id="modFireButton"></span><span id="modvalue" style="margin: 0px 5px;"></span></div>
<br style="clear:both;">
<br>
<div id="sendRaw01" style="visibility:hidden;">Sounds exactly same with [Fire MIDI], but this button using sendRaw() method.</div>
<div><span id="sendRaw"></span></div>
<br>
<div id="prgChangeText02" style="visibility:hidden;">Play with virtual MIDI keybord!!</div>
<div class="keyCanvasArea"><canvas id="keyboard" height="0px"></canvas></div>
<br>
<br>
<div id="allOffText" style="visibility:hidden;">Try with difference between AllSoundOff and AllNoteOff with [Fire MIDI (Sustain oneNote)] button.<br>(Suddenly stop with AllSoundOff even sustain and sound reflection, but AllNoteOff does not.) </div>
<div><span id="sustain2FireButton"></span><span id="sustainvalue"></span></div>
<div><span id="allNoteOff"></span></div>
<div><span id="allSndOff"></span></div>
<br>
<hr>
<p>Developed by <a href="https://www.google.com/+RyoyaKAWAI" target="_blank">Ryoya KAWAI</a>.</p>
<a href="https://github.com/ryoyakawai/WebMIDIAPIWrapper" target="_new" class="header" style="position: absolute; z-index:2; top: 0; right: 0; border: none;"><img src="images/forkme.png" alt="Fork me on GitHub" border="0"></a>
<script src="js/WebMIDIAPI.js"></script>
<script src="js/flatKeyboard.js"></script>
<script src="js/WebMIDIAPIWrapper.js"></script>
<script src="js/ctrlWebMIDIAPIWrapper.js"></script>
<script src="js/voiceList.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35804975-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>