mercury-engine
Version:
The mercury engine generates web audio output from mercury code input
69 lines (55 loc) • 2.41 kB
HTML
<html>
<head>
<title>MIDI Output Example</title>
<!-- Use the latest minified es5 distribution online -->
<!-- <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 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>
</p>
<!-- 2 buttons in the html page -->
<button id="b1">start</button>
<button id="b2">silence</button>
<p id="midi-status" style="font-family: arial;"></p>
<script>
// This script loads the Mercury Engine. When you click start it
// evaluates some code that sends midinotes to the default output.
// Available outputs are listed on the html page and printed in
// the console.
// Include the package from unpkg.com
const { Mercury } = MercuryEngine;
// Initialize a Mercury engine with callback function when midi loaded
const Engine = new Mercury({
onmidi: () => {
// display the midi status, inputs and outputs in the html
let t = document.getElementById('midi-status');
t.innerHTML += `MIDI is enabled: ${Engine.midi.enabled}<br>`;
Engine.midi.inputs.forEach((d, i) => {
t.innerHTML += `<br>in ${i}: ${d.name}`;
});
Engine.midi.outputs.forEach((d, i) => {
t.innerHTML += `<br>out ${i}: ${d.name}`;
});
}
});
// Some mercury code to be evaluated on button click
const mercuryCode = `
set tempo 100
set scale major c
new midi default time(1/1) chord(on) note(chordsFromNumerals(I IV V VIm) 1) length(1/2)
new midi default time(1/8) note(random(16 12) 2) length(1/16) program([0 5 5 10]) out(2)
new midi default time(1/8) midinote(choose(16 [36 36 40 42 42 42])) out(10) timediv([1 1 2])
`
// evaluate the code on the click of a button
let b1 = document.getElementById('b1');
b1.onclick = () => Engine.code(mercuryCode);
// stop the code on the click of a button
let b2 = document.getElementById('b2');
b2.onclick = () => Engine.silence();
</script>
</body>
</html>