-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvolca.html
119 lines (99 loc) · 5.46 KB
/
volca.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
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://requirejs.org/docs/release/2.1.18/minified/require.js"></script>
<script src="js/knob.js"></script>
</head>
<body>
<div class="instrument">
<div class="settings">
<label>MIDI port: </label>
<select class="ports-out"></select>
<label>Channel: </label>
<select class="channels-out"></select>
</div>
<div class="iface volca-keys" style="display: none">
<input class="knob cc040 large" data-cc="040" type="range" min="0" max="127" data-degree-range="160" data-degree-offset="90" step="1" value="0" />
<input class="knob cc041 large" data-cc="041" type="range" min="0" max="127" data-degree-range="160" data-degree-offset="90" step="1" value="0" />
<input class="knob cc042 small" data-cc="042" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc005 small" data-cc="005" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc043 small" data-cc="043" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc044 small" data-cc="044" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc011 small" data-cc="011" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc045 small" data-cc="045" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc046 small" data-cc="046" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc047 small" data-cc="047" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc048 small" data-cc="048" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc049 small" data-cc="049" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc050 small" data-cc="050" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc051 small" data-cc="051" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc052 small" data-cc="052" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
<input class="knob cc053 small" data-cc="053" type="range" min="0" max="127" data-degree-range="270" data-degree-offset="45" step="1" value="0" />
</div>
</div>
<script>
requirejs(['js/midi'], function (midi) {
var STORAGE_KEY = 'volca-keys';
var mgw = new midi.Gateway();
var sender = new midi.ChannelSender();
mgw.addSender(sender);
var $outSelector = $('.instrument .settings .ports-out');
var $chnSelector = $('.instrument .settings .channels-out');
var model = JSON.parse(localStorage.getItem(STORAGE_KEY));
var start = function(){
mgw.getAvailableOutputs().forEach(function(port) {
addPortToSelector($outSelector, port);
});
if(mgw.getAvailableOutputs().size != 0) {
mgw.selectOutput($outSelector.val());
}
$outSelector.on('change', function(){
var val = $outSelector.val();
mgw.selectOutput();
model['out'] = val;
});
for(var i=0; i<16; ++i) {
$chnSelector.append('<option value="'+i+'">'+(i+1)+'</option>');
}
sender.setChannel($chnSelector.val());
$chnSelector.on('change', function(){
var val = $chnSelector.val();
sender.setChannel(val);
model['port'] = val;
});
$('.instrument .iface').show();
$('.knob').each(function(i, e){
var cc = parseInt($(e).data('cc'));
var val = model['cc'][cc];
if(val !== null && val !== undefined){ e.setAttribute('value', val); }
rangeKnob(e, "#ff3300");
}).change(function(e){
var $e = $(e.target);
var cc = parseInt($e.data('cc'));
var val = parseInt($e.val());
sender.cc(cc, val);
model['cc'][cc] = val;
});
// $(".knob").draggable({ stop: function(event, ui) { console.log('left:'+ui.position.left+'px; top:'+ui.position.top+'px;');}});
};
mgw.checkCompatibility(function(){
start();
}, function(err){
alert(err);
});
var addPortToSelector = function($e, port){
var opt = document.createElement("option");
opt.text = port.manufacturer + ' ' + port.name + ' ' + port.type;
opt.value = port.id;
$e.append(opt);
};
setInterval(function(){localStorage.setItem(STORAGE_KEY, JSON.stringify(model))}, 3333);
});
</script>
</body>
</html>