-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·119 lines (97 loc) · 3.68 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
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Chaos Tao - an algorithmic music generator</title>
<script src="js/jquery-2.1.4.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> -->
<script src="js/webpd-latest.min.js"></script>
<!-- <script type="text/javascript" src="../../dist/webpd-latest.min.js"></script> -->
<script type="text/javascript" src="examples/assets/examples.js"></script>
</head>
<body>
<div id="loading">Loading ...</div>
<div id="des">"Chaos Tao" is an algorithmic music generator.
<br />It generates a series midi sequences in real time, then play them out and output the midi notes.<br />
You can open a midi synthesiser to get more sound effects.
<br />
PS: You should access this page using 'https' not 'http'.
</div>
<div>
More info here: <a href="https://github.com/avantcontra/chaostao"
target="_blank">github.com/avantcontra/chaostao</a>
</div>
<br />
<button id="startButton">Click to Start</button>
<div id="svg"></div>
</div>
<script type="text/javascript">
webPdExamples.init()
var patch
$.get('patches/chaos_0.925_without_tab.pd', function (mainStr) {
// Loading the patch
patch = Pd.loadPatch(mainStr)
webPdExamples.patchLoaded(mainStr)
})
var context = null;
var midiAccess = null;
window.addEventListener('load', function () {
// patch up prefixes
// window.AudioContext=window.AudioContext||window.webkitAudioContext;
// context = new AudioContext();
navigator.permissions.query({ name: 'midi' }).then(function (result) {
console.log('permission result', result)
if (result.state == 'granted') {
if (navigator.requestMIDIAccess) {
navigator.requestMIDIAccess({
sysex: true
}).then(onMIDIInit, onMIDIReject);
}
else {
alert("oops, no MIDI support present in your browser.")
}
} else {//if (result.state == 'prompt') {
alert("oops, no MIDI support present in your browser.")
}
// Don't do anything if the permission was denied.
});
});
function onMIDIInit(midi) {
midiAccess = midi;
hookUpMIDIOutput();
midiAccess.onstatechange = hookUpMIDIOutput;
}
function onMIDIReject(err) {
alert("oops, the MIDI system failed to start.");
}
function hookUpMIDIOutput() {
//console.log(" in hookUpMIDIOutput");
var haveAtLeastOneDevice = false;
for (var input of midiAccess.outputs.values()) {
input.send([0x90, 80, 0x64]);//0x90, 60, 0x7f
haveAtLeastOneDevice = true;
console.log("Output port [type:'" + input.type + "'] id:'" + input.id +
"' manufacturer:'" + input.manufacturer + "' name:'" + input.name +
"' version:'" + input.version + "'");
}
Pd.receive('midiout', function (args) {
console.log('received a message from "midiout" : ', args)
for (var input of midiAccess.outputs.values()) {
input.send([0x90, args, 0x64]);//0x90, 60, 0x7f
haveAtLeastOneDevice = true;
}
})
}
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-68576315-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>