mercury-engine 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +149 -26
- package/dist/mercury.js +140 -71
- package/dist/mercury.min.es5.js +2 -2
- package/dist/mercury.min.js +1 -1
- package/examples/basic/index.html +22 -17
- package/examples/midi/index.html +68 -0
- package/package.json +1 -1
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
<html>
|
|
3
3
|
|
|
4
4
|
<head>
|
|
5
|
-
<title>Mercury
|
|
5
|
+
<title>Mercury Basic Example</title>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
<!-- <script src="
|
|
7
|
+
<!-- Use the latest minified es5 distribution -->
|
|
8
|
+
<!-- <script src="https://unpkg.com/mercury-engine/dist/mercury.min.es5.js"></script> -->
|
|
9
9
|
|
|
10
|
+
<!-- from local while developing -->
|
|
11
|
+
<script src="./../../dist/mercury.min.es5.js"></script>
|
|
10
12
|
</head>
|
|
11
13
|
|
|
12
14
|
<body>
|
|
@@ -18,34 +20,37 @@
|
|
|
18
20
|
<button id="b1">start</button>
|
|
19
21
|
<button id="b2">silence</button>
|
|
20
22
|
|
|
23
|
+
<p id="engine-status" style="font-family: 'arial';"></p>
|
|
24
|
+
|
|
21
25
|
<script>
|
|
22
26
|
// This script loads the Mercury Engine and allows to insert code
|
|
23
27
|
// from a textarea in the html page
|
|
24
28
|
|
|
25
29
|
// Include the package from unpkg.com
|
|
26
30
|
const { Mercury } = MercuryEngine;
|
|
27
|
-
// const { OSC } = MercuryEngine;
|
|
28
|
-
// const { MIDI } = MercuryEngine;
|
|
29
31
|
|
|
30
32
|
// Initialize a Mercury engine with callback function when loaded
|
|
31
33
|
const Engine = new Mercury({
|
|
32
34
|
onload: () => {
|
|
33
35
|
console.log('The engine and sounds are loaded!');
|
|
34
|
-
|
|
35
|
-
// set the volume to 0.7, about -3dBFS
|
|
36
|
-
Engine.setVolume(0.7);
|
|
37
|
-
// generate a random BPM
|
|
38
|
-
Engine.randomBPM();
|
|
39
|
-
// set the crossfade from previous and new evaluated code to 250 ms
|
|
40
|
-
Engine.setCrossFade(1000);
|
|
41
|
-
|
|
42
|
-
console.log('BPM:', Engine.bpm);
|
|
43
|
-
console.log('Volume:', Engine.volume);
|
|
44
|
-
console.log('CrossFade:', Engine.crossFade);
|
|
45
36
|
}
|
|
46
37
|
});
|
|
47
38
|
|
|
48
|
-
//
|
|
39
|
+
// set the volume to 0.7, about -3dBFS
|
|
40
|
+
Engine.setVolume(0.7);
|
|
41
|
+
// generate a random BPM
|
|
42
|
+
Engine.randomBPM();
|
|
43
|
+
// set the crossfade from previous and new evaluated code to 250 ms
|
|
44
|
+
Engine.setCrossFade(1000);
|
|
45
|
+
|
|
46
|
+
// display the engine settings in the html
|
|
47
|
+
let t = document.getElementById('engine-status');
|
|
48
|
+
|
|
49
|
+
t.innerHTML += `BPM: ${Engine.bpm}<br>`;
|
|
50
|
+
t.innerHTML += `Volume: ${Engine.volume}<br>`;
|
|
51
|
+
t.innerHTML += `CrossFade: ${Engine.crossFade}<br>`;
|
|
52
|
+
t.innerHTML += `LowPass: ${Engine.lowPass}<br>`;
|
|
53
|
+
t.innerHTML += `HighPass: ${Engine.highPass}<br>`;
|
|
49
54
|
|
|
50
55
|
// Some mercury code initially created
|
|
51
56
|
const simpleCode = `
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>MIDI Output Example</title>
|
|
6
|
+
|
|
7
|
+
<!-- Use the latest minified es5 distribution online -->
|
|
8
|
+
<!-- <script src="https://unpkg.com/mercury-engine/dist/mercury.min.es5.js"></script> -->
|
|
9
|
+
|
|
10
|
+
<!-- from local while developing -->
|
|
11
|
+
<script src="./../../dist/mercury.min.es5.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<p style="font-family: 'arial';">
|
|
16
|
+
The Mercury Engine can output MIDI if this is supported by your browser. The midi instrument can send notes and chords at rhythmical timing and also send out control change (cc) messages. Find more info and tutorials on how to use MIDI in Mercury code in the <a target="blank" href="https://github.com/tmhglnd/mercury/blob/master/docs/02-instrument.md#midi">documentation</a>
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
<!-- 2 buttons in the html page -->
|
|
20
|
+
<button id="b1">start</button>
|
|
21
|
+
<button id="b2">silence</button>
|
|
22
|
+
|
|
23
|
+
<p id="midi-status" style="font-family: arial;"></p>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
// This script loads the Mercury Engine. When you click start it
|
|
27
|
+
// evaluates some code that sends midinotes to the default output.
|
|
28
|
+
// Available outputs are listed on the html page and printed in
|
|
29
|
+
// the console.
|
|
30
|
+
|
|
31
|
+
// Include the package from unpkg.com
|
|
32
|
+
const { Mercury } = MercuryEngine;
|
|
33
|
+
|
|
34
|
+
// Initialize a Mercury engine with callback function when midi loaded
|
|
35
|
+
const Engine = new Mercury({
|
|
36
|
+
onmidi: () => {
|
|
37
|
+
// display the midi status, inputs and outputs in the html
|
|
38
|
+
let t = document.getElementById('midi-status');
|
|
39
|
+
t.innerHTML += `MIDI is enabled: ${Engine.midi.enabled}<br>`;
|
|
40
|
+
|
|
41
|
+
Engine.midi.inputs.forEach((d, i) => {
|
|
42
|
+
t.innerHTML += `<br>in ${i}: ${d.name}`;
|
|
43
|
+
});
|
|
44
|
+
Engine.midi.outputs.forEach((d, i) => {
|
|
45
|
+
t.innerHTML += `<br>out ${i}: ${d.name}`;
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
// Some mercury code to be evaluated on button click
|
|
51
|
+
const midiCode = `
|
|
52
|
+
set tempo 100
|
|
53
|
+
set scale major c
|
|
54
|
+
new midi default time(1/1) chord(on) note(chordsFromNumerals(I IV V VIm) 1) length(1/2)
|
|
55
|
+
new midi default time(1/8) note(random(16 12) 2) length(1/16)
|
|
56
|
+
`
|
|
57
|
+
|
|
58
|
+
// evaluate the code on the click of a button
|
|
59
|
+
let b1 = document.getElementById('b1');
|
|
60
|
+
b1.onclick = () => Engine.code(midiCode);
|
|
61
|
+
|
|
62
|
+
// stop the code on the click of a button
|
|
63
|
+
let b2 = document.getElementById('b2');
|
|
64
|
+
b2.onclick = () => Engine.silence();
|
|
65
|
+
</script>
|
|
66
|
+
</body>
|
|
67
|
+
|
|
68
|
+
</html>
|