mercury-engine
Version:
The mercury engine generates web audio output from mercury code input
90 lines (71 loc) • 2.96 kB
HTML
<html>
<head>
<title>Mercury Basic Example</title>
<!-- Use the latest minified es5 distribution -->
<!-- <script src="https://unpkg.com/mercury-engine/dist/mercury.min.es5.js"></script> -->
<!-- from local while developing -->
<script src="./../../dist/mercury.js"></script>
</head>
<body>
<p style="font-family: 'arial';">
The Mercury Engine is running on an html page through a script src include from unpkg.com. Open the Javascript Console to see some information logged about the engine while it's running. For documentation go to <a target="blank" href="https://github.com/tmhglnd/mercury-engine#usage">github.com/tmhglnd/mercury-engine</a>
</p>
<!-- 2 buttons in the html page -->
<button id="b1">start</button>
<button id="b2">silence</button>
<p id="engine-status" style="font-family: 'arial';"></p>
<script>
// This script loads the Mercury Engine and allows to insert code
// from a textarea in the html page
// Include the package from unpkg.com
const { Mercury } = MercuryEngine;
// Initialize a Mercury engine with callback function when loaded
const Engine = new Mercury({
onload: () => {
console.log('The engine and sounds are loaded!');
console.log('Samples loaded:', Engine.getBuffers());
}
});
// set the volume to 0.7, about -3dBFS
Engine.setVolume(0.7);
// generate a random BPM
Engine.randomBPM();
// set the crossfade from previous and new evaluated code to 250 ms
Engine.setCrossFade(1000);
// display the engine settings in the html
let t = document.getElementById('engine-status');
t.innerHTML += `BPM: ${Engine.bpm}<br>`;
t.innerHTML += `Volume: ${Engine.volume}<br>`;
t.innerHTML += `CrossFade: ${Engine.crossFade}<br>`;
t.innerHTML += `LowPass: ${Engine.lowPass}<br>`;
t.innerHTML += `HighPass: ${Engine.highPass}<br>`;
// Some mercury code initially created
const mercuryCode = `
set tempo 110
set randomSeed 4831
set scale dorian d
list progression chordsFromNumerals([I7 IIIm7 IV7 V7])
print progression
new polySynth saw name(chrd)
set chrd note(progression 1) time(2/1) shape(1 2/1) fx(triggerFilter low 1/1 1/1 4000 100) super(3 0.132)
list melody add(repeat(flat(progression) 2) [0 12])
new polySynth saw name(lead)
set lead note(melody 2) time(1/8) shape(1 2/1) super(3 0.112) gain(0.6) fx(triggerFilter low 1 1/6 5000 100)
set all fx(squash 1) fx(reverb 0.4 7)
list drums choose(17 [hat_808 kick_808 snare_808])
new sample drums time(1/8) gain(0.7) fx(degrade 0.7) fx(delay 3/16 5/16 0.9) timediv([1 1 1 2])
`
// evaluate the code on the click of a button
let b1 = document.getElementById('b1');
b1.onclick = () => {
let tree = Engine.code(mercuryCode);
console.log(tree);
// console.log(tree.errors);
}
// stop the code on the click of a button
let b2 = document.getElementById('b2');
b2.onclick = () => Engine.silence();
</script>
</body>
</html>