-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (120 loc) · 5.92 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html lang="en">
<head>
<title>Pure Data and Emscripten Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #61443e;
font-family: Monospace;
font-size: 13px;
background-color: #bfd1e5;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
#loading-status {
margin: 12px;
}
a {
color: #a06851;
}
button {
font-family: monospace;
}
#play-pause {
margin-left: 12px;
}
#patch-image {
display: block;
margin: 12px;
position: relative;
width: 90%;
max-width: 600px;
}
</style>
<body>
<div id="loading-status">Loading...</div>
<button disabled id="play-pause">Toggle Playback</button>
<button disabled id="oscillators">Send "changeOsc"</button>
<img id="patch-image" width="500" src="img/patch.JPG"></img>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="dst/module.js"></script>
<script>
var zg = {
context_new: Module.cwrap('zg_context_new', 'number', ['number', 'number', 'number', 'number', 'number']),
context_new_graph_from_file: Module.cwrap('zg_context_new_graph_from_file', 'number', ['number', 'string', 'string']),
graph_attach: Module.cwrap('zg_graph_attach', null, ['number']),
context_process: Module.cwrap('zg_context_process', null, ['number', 'number', 'number']),
context_delete: Module.cwrap('zg_context_delete', null, ['number']),
context_send_messageV0: Module.cwrap('zg_context_send_messageV', null, ['number', 'string', 'number', 'string']),
context_send_messageV1: Module.cwrap('zg_context_send_messageV', null, ['number', 'string', 'number', 'string', 'number'])
}
$('#loading-status').text('Loading... done.')
var AudioContext = window.AudioContext || window.webkitAudioContext
if (AudioContext == null) {
console.error('Web Audio not supported.')
}
var audioContext = new AudioContext()
$.get('pd/demo.pd', function (data) {
var playPause = $('#play-pause')
var playing = true
var connected = true
var pauseTimeout = 0
playPause.prop('disabled', false)
playPause.click(function () {
if (playing) {
pauseTimeout = setTimeout(function () {
// Fade out takes 200 ms
scriptProcessor.disconnect(audioContext.destination)
connected = false
}, 250)
playing = false
zg.context_send_messageV0(zgContext, "fadeOut", 0.0, "b")
} else {
clearTimeout(pauseTimeout)
playing = true
zg.context_send_messageV0(zgContext, "fadeIn", 0.0, "b")
if (!connected) {
scriptProcessor.connect(audioContext.destination)
connected = true
}
}
})
var oscillators = $('#oscillators')
oscillators.prop('disabled', false)
oscillators.click(function () {
zg.context_send_messageV0(zgContext, "changeOsc", 0.0, "b")
})
FS.mkdir('pd')
FS.writeFile('pd/demo.pd', data)
var scriptProcessor = audioContext.createScriptProcessor(null, 0, 2)
var blockSize = scriptProcessor.bufferSize
var bufferSize = blockSize * 2 * 4
var scriptOutputPtr = Module._malloc(bufferSize)
var scriptOutputBuffer = Module.HEAPU8.subarray(scriptOutputPtr, scriptOutputPtr + bufferSize)
var outputBufferChannel1 = new Float32Array(scriptOutputBuffer.buffer, scriptOutputBuffer.byteOffset, blockSize)
var outputBufferChannel2 = new Float32Array(scriptOutputBuffer.buffer, scriptOutputBuffer.byteOffset + blockSize * 4, blockSize)
var zgContext = zg.context_new(0, 2, blockSize, audioContext.sampleRate, null, null)
var zgGraph = zg.context_new_graph_from_file(zgContext, 'pd/', 'demo.pd')
if (zgGraph === 0) {
console.error('Error loading graph.')
return
}
zg.graph_attach(zgGraph)
scriptProcessor.onaudioprocess = function (audioProcessingEvent) {
zg.context_process(zgContext, 0, scriptOutputPtr)
var outputBuffer = audioProcessingEvent.outputBuffer
outputBuffer.copyToChannel(outputBufferChannel1, 0)
outputBuffer.copyToChannel(outputBufferChannel2, 1)
}
scriptProcessor.connect(audioContext.destination)
})
</script>
</body>
</head>
</html>