-
-
Notifications
You must be signed in to change notification settings - Fork 282
/
index.html
64 lines (62 loc) · 1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alda-player.js test page</title>
</head>
<body>
<p>IMPORTANT: For alda.wasm to work on this page:</p>
<ol>
<li>
<code>alda.wasm</code> must be present in the same directory.
</li>
<li>
You must view this page served on localhost, instead of viewing the HTML
file directly in your browser.
</li>
</ol>
<p>
The easiest way to get this test page working is to run the
<code>serve</code> script in this directory. The script will fetch the
latest version of <code>alda.wasm</code> and use the npm
<a href="https://www.npmjs.com/package/http-server">http-server</a> package
to serve the contents of this directory, including this page.
</p>
<script src="wasm_exec.js"></script>
<script>
if (!WebAssembly.instantiateStreaming) { // polyfill
WebAssembly.instantiateStreaming = async (resp, importObject) => {
const source = await (await resp).arrayBuffer();
return await WebAssembly.instantiate(source, importObject);
};
}
const go = new Go();
WebAssembly.instantiateStreaming(
fetch("alda.wasm"), go.importObject
).then((result) => {
go.run(result.instance)
console.info(`alda.wasm ${Alda.VERSION} loaded`)
}).catch((err) => {
console.error(err);
});
</script>
<script src="alda-player.js"></script>
<!--
Temporary JZZ test code.
TODO: Bundle JZZ with alda-player.js?
-->
<script src="https://cdn.jsdelivr.net/npm/jzz"></script>
<script src="https://cdn.jsdelivr.net/npm/jzz-synth-tiny"></script>
<script>
function test_jzz() {
let tiny = JZZ.synth.Tiny();
const randomProgramNumber = Math.floor(Math.random() * 128);
tiny.program(0, randomProgramNumber).noteOn(0, 'C5', 127)
.wait(500).noteOn(0, 'E5', 127)
.wait(500).noteOn(0, 'G5', 127)
.wait(500).noteOff(0, 'C5').noteOff(0, 'E5').noteOff(0, 'G5');
}
</script>
<button onclick="test_jzz()">click me to make sound</button>
</body>
</html>