mercury-engine 1.0.2 → 1.0.4
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 +192 -27
- package/dist/mercury.js +174 -87
- package/dist/mercury.min.es5.js +2 -2
- package/dist/mercury.min.js +1 -1
- package/examples/basic/index.html +25 -19
- package/examples/interface/index.html +87 -0
- package/examples/midi/index.html +68 -0
- package/examples/samples/freesound-samples.json +6 -0
- package/examples/samples/samples-freesound.html +74 -0
- package/examples/samples/samples-from-json.html +79 -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,37 +20,41 @@
|
|
|
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);
|
|
36
|
+
console.log('Samples loaded:', Engine.getBuffers());
|
|
45
37
|
}
|
|
46
38
|
});
|
|
47
39
|
|
|
48
|
-
//
|
|
40
|
+
// set the volume to 0.7, about -3dBFS
|
|
41
|
+
Engine.setVolume(0.7);
|
|
42
|
+
// generate a random BPM
|
|
43
|
+
Engine.randomBPM();
|
|
44
|
+
// set the crossfade from previous and new evaluated code to 250 ms
|
|
45
|
+
Engine.setCrossFade(1000);
|
|
46
|
+
|
|
47
|
+
// display the engine settings in the html
|
|
48
|
+
let t = document.getElementById('engine-status');
|
|
49
|
+
|
|
50
|
+
t.innerHTML += `BPM: ${Engine.bpm}<br>`;
|
|
51
|
+
t.innerHTML += `Volume: ${Engine.volume}<br>`;
|
|
52
|
+
t.innerHTML += `CrossFade: ${Engine.crossFade}<br>`;
|
|
53
|
+
t.innerHTML += `LowPass: ${Engine.lowPass}<br>`;
|
|
54
|
+
t.innerHTML += `HighPass: ${Engine.highPass}<br>`;
|
|
49
55
|
|
|
50
56
|
// Some mercury code initially created
|
|
51
|
-
const
|
|
57
|
+
const mercuryCode = `
|
|
52
58
|
set tempo 110
|
|
53
59
|
set randomSeed 4831
|
|
54
60
|
set scale dorian d
|
|
@@ -69,7 +75,7 @@
|
|
|
69
75
|
|
|
70
76
|
// evaluate the code on the click of a button
|
|
71
77
|
let b1 = document.getElementById('b1');
|
|
72
|
-
b1.onclick = () => Engine.code(
|
|
78
|
+
b1.onclick = () => Engine.code(mercuryCode);
|
|
73
79
|
|
|
74
80
|
// stop the code on the click of a button
|
|
75
81
|
let b2 = document.getElementById('b2');
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Interface for Mercury</title>
|
|
6
|
+
|
|
7
|
+
<!-- Use the latest minified es5 distribution -->
|
|
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.js"></script>
|
|
12
|
+
|
|
13
|
+
<!-- include p5js script for DOM elements -->
|
|
14
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<p style="font-family: 'arial';">
|
|
19
|
+
This example demonstrates how to use P5js DOM elements (like for example sliders) to control parameters in Mercury synths/samples. This can be interesting to create user interaction with the music through the code.
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<!-- 2 buttons in the html page -->
|
|
23
|
+
<button id="b1">start</button>
|
|
24
|
+
<button id="b2">silence</button>
|
|
25
|
+
|
|
26
|
+
<!-- a paragraph to print some things to -->
|
|
27
|
+
<p id="status" style="font-family: 'arial';"></p>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
// This script loads the Mercury Engine and allows to insert code
|
|
31
|
+
// from a textarea in the html page
|
|
32
|
+
|
|
33
|
+
// Include the package from unpkg.com
|
|
34
|
+
const { Mercury } = MercuryEngine;
|
|
35
|
+
|
|
36
|
+
// Initialize a Mercury engine with callback function when loaded
|
|
37
|
+
const Engine = new Mercury({
|
|
38
|
+
onload: () => {
|
|
39
|
+
console.log('The engine and sounds are loaded!');
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
// create variables for the various sliders
|
|
44
|
+
let cutoff;
|
|
45
|
+
let note;
|
|
46
|
+
let squash;
|
|
47
|
+
let detune;
|
|
48
|
+
|
|
49
|
+
// initialize the sliders with specific ranges
|
|
50
|
+
// use noCanvas() because we're not planning on drawing anything
|
|
51
|
+
function setup() {
|
|
52
|
+
noCanvas();
|
|
53
|
+
cutoff = createSlider(50, 5000, 200, 0);
|
|
54
|
+
note = createSlider(-12, 12, -10, 1);
|
|
55
|
+
degrade = createSlider(0, 1, 0.4, 0);
|
|
56
|
+
detune = createSlider(0, 1, 0.3, 0);
|
|
57
|
+
|
|
58
|
+
cutoff.style('width', '50%');
|
|
59
|
+
note.style('width', '50%');
|
|
60
|
+
degrade.style('width', '50%');
|
|
61
|
+
detune.style('width', '50%');
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// The Mercury code asks for the `{x.value()}` from the sliders
|
|
65
|
+
// in the parameter functions
|
|
66
|
+
// This has to be done via a string, and within the string {} that
|
|
67
|
+
// evaluates small javascript snippets
|
|
68
|
+
const mercuryCode = `
|
|
69
|
+
set tempo 130
|
|
70
|
+
new synth saw name(s1)
|
|
71
|
+
set s1 note('{note.value()}' 0) slide(1/16)
|
|
72
|
+
set s1 fx(filter low '{cutoff.value()}' 0.4 1/16)
|
|
73
|
+
set s1 super('{detune.value()}' 3) shape(off)
|
|
74
|
+
set s1 time(1/16) fx(degrade '{degrade.value()}')
|
|
75
|
+
`
|
|
76
|
+
|
|
77
|
+
// evaluate the code on the click of a button
|
|
78
|
+
let b1 = document.getElementById('b1');
|
|
79
|
+
b1.onclick = () => Engine.code(mercuryCode);
|
|
80
|
+
|
|
81
|
+
// stop the code on the click of a button
|
|
82
|
+
let b2 = document.getElementById('b2');
|
|
83
|
+
b2.onclick = () => Engine.silence();
|
|
84
|
+
</script>
|
|
85
|
+
</body>
|
|
86
|
+
|
|
87
|
+
</html>
|
|
@@ -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 mercuryCode = `
|
|
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(mercuryCode);
|
|
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>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Load Samples</title>
|
|
6
|
+
|
|
7
|
+
<!-- Use the latest minified es5 distribution -->
|
|
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.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<p style="font-family: 'arial';">
|
|
16
|
+
This example demonstrates how to import some custom samples from places like Freesound.org and raw github files.
|
|
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="sample-status" style="font-family: 'arial';"></p>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
// This script loads the Mercury Engine and allows to insert code
|
|
27
|
+
// from a textarea in the html page
|
|
28
|
+
|
|
29
|
+
// Include the package from unpkg.com
|
|
30
|
+
const { Mercury } = MercuryEngine;
|
|
31
|
+
|
|
32
|
+
// Initialize a Mercury engine with callback function when loaded
|
|
33
|
+
const Engine = new Mercury({
|
|
34
|
+
onload: () => {
|
|
35
|
+
console.log('The engine and sounds are loaded!');
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// print things to the html
|
|
40
|
+
window.addEventListener('mercuryLog', (e) => {
|
|
41
|
+
let p = JSON.stringify(e.detail).replace(/\,/g, ' ').replace(/\"/g, '');
|
|
42
|
+
document.getElementById('sample-status').innerHTML += `${p}<br>`;
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// add a sample from a url using an array.
|
|
46
|
+
// The first value in the array determines the name of the file
|
|
47
|
+
let s1 = [ 'snare_short', 'https://cdn.freesound.org/previews/671/671221_3797507-lq.mp3'];
|
|
48
|
+
let s2 = [ 'psykick', 'https://cdn.freesound.org/previews/145/145778_2101444-lq.mp3' ];
|
|
49
|
+
let s3 = [ 'hat_short', 'https://cdn.freesound.org/previews/222/222058_1676145-lq.mp3' ];
|
|
50
|
+
// the array contains the arrays of [name, url]
|
|
51
|
+
let samples = [s1, s2, s3];
|
|
52
|
+
|
|
53
|
+
// add them to the engine
|
|
54
|
+
Engine.addBuffers(samples);
|
|
55
|
+
|
|
56
|
+
// Some mercury code initially created
|
|
57
|
+
const sampleCode = `
|
|
58
|
+
set tempo 130
|
|
59
|
+
new sample psykick time(1/4)
|
|
60
|
+
new sample snare_short time(1/16) play(euclid(7 3)) gain(0.5)
|
|
61
|
+
new sample hat_short time(1/4 1/8) gain(1.3)
|
|
62
|
+
`
|
|
63
|
+
|
|
64
|
+
// evaluate the code on the click of a button
|
|
65
|
+
let b1 = document.getElementById('b1');
|
|
66
|
+
b1.onclick = () => Engine.code(sampleCode);
|
|
67
|
+
|
|
68
|
+
// stop the code on the click of a button
|
|
69
|
+
let b2 = document.getElementById('b2');
|
|
70
|
+
b2.onclick = () => Engine.silence();
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
|
|
74
|
+
</html>
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<title>Load Samples</title>
|
|
6
|
+
|
|
7
|
+
<!-- Use the latest minified es5 distribution -->
|
|
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.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<p style="font-family: 'arial';">
|
|
16
|
+
This example demonstrates how to import some custom samples from places like Freesound.org and raw github files by using a json format. This can be written in the code or a file stored on a separate place.
|
|
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="sample-status" style="font-family: 'arial';"></p>
|
|
24
|
+
|
|
25
|
+
<script>
|
|
26
|
+
// This script loads the Mercury Engine and allows to insert code
|
|
27
|
+
// from a textarea in the html page
|
|
28
|
+
|
|
29
|
+
// Include the package from unpkg.com
|
|
30
|
+
const { Mercury } = MercuryEngine;
|
|
31
|
+
|
|
32
|
+
// this function is called when all other samples are loaded
|
|
33
|
+
function loadExtraSounds(){
|
|
34
|
+
// add a sample from a url using json in the format { name: url }.
|
|
35
|
+
// The _base key allows you to set the same url for all the filenames
|
|
36
|
+
// See the file to inspect the content
|
|
37
|
+
let samples =
|
|
38
|
+
'https://raw.githubusercontent.com/tmhglnd/mercury-engine/main/examples/samples/freesound-samples.json';
|
|
39
|
+
|
|
40
|
+
// add them to the engine
|
|
41
|
+
Engine.addBuffers(samples, () => {
|
|
42
|
+
console.log('Extra samples from JSON Loaded!', Engine.getBuffers());
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Initialize a Mercury engine with callback function when loaded
|
|
47
|
+
const Engine = new Mercury({
|
|
48
|
+
onload: () => {
|
|
49
|
+
console.log('The engine and sounds are loaded!', Engine.getBuffers());
|
|
50
|
+
// load extra sounds from json url
|
|
51
|
+
loadExtraSounds();
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// print things to the html
|
|
56
|
+
window.addEventListener('mercuryLog', (e) => {
|
|
57
|
+
let p = JSON.stringify(e.detail).replace(/\,/g, ' ').replace(/\"/g, '');
|
|
58
|
+
document.getElementById('sample-status').innerHTML += `${p}<br>`;
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// Some mercury code initially created
|
|
62
|
+
const sampleCode = `
|
|
63
|
+
set tempo 130
|
|
64
|
+
new sample psykick time(1/4)
|
|
65
|
+
new sample snare_short time(1/16) play(euclid(7 3)) gain(0.5)
|
|
66
|
+
new sample hat_short time(1/4 1/8) gain(1.3)
|
|
67
|
+
`
|
|
68
|
+
|
|
69
|
+
// evaluate the code on the click of a button
|
|
70
|
+
let b1 = document.getElementById('b1');
|
|
71
|
+
b1.onclick = () => Engine.code(sampleCode);
|
|
72
|
+
|
|
73
|
+
// stop the code on the click of a button
|
|
74
|
+
let b2 = document.getElementById('b2');
|
|
75
|
+
b2.onclick = () => Engine.silence();
|
|
76
|
+
</script>
|
|
77
|
+
</body>
|
|
78
|
+
|
|
79
|
+
</html>
|