mercury-engine
Version:
The mercury engine generates web audio output from mercury code input
101 lines (84 loc) • 3.02 kB
HTML
<html>
<head>
<title>Interface for Mercury</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>
<!-- include p5js script for DOM elements -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
</head>
<body>
<p style="font-family: 'arial';">
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.
</p>
<!-- 2 buttons in the html page -->
<button id="b1">start</button>
<button id="b2">silence</button>
<!-- a paragraph to print some things to -->
<p id="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!');
}
});
// create variables for the various sliders
let cutoff;
let note;
let squash;
let detune;
let distort;
let verb;
// initialize the sliders with specific ranges
// use noCanvas() because we're not planning on drawing anything
function setup() {
noCanvas();
createP('filter');
cutoff = createSlider(50, 5000, 200, 0);
createP('note');
note = createSlider(-12, 12, -10, 1);
createP('degrade');
degrade = createSlider(0, 1, 0.4, 0);
createP('detuning');
detune = createSlider(0, 1, 0.3, 0);
createP('distortion');
distort = createSlider(1, 200, 5, 0);
createP('reverb');
verb = createSlider(1, 20, 10, 0);
cutoff.style('width', '50%');
note.style('width', '50%');
degrade.style('width', '50%');
detune.style('width', '50%');
distort.style('width', '50%');
verb.style('width', '50%');
}
// The Mercury code asks for the `{x.value()}` from the sliders
// in the parameter functions
// This has to be done via a string, and within the string {} that
// evaluates small javascript snippets
const mercuryCode = `
set tempo 130
new synth saw name(s1) time(1/16) shape(1 1/8)
set s1 note('{note.value()}' 0) slide(1/16)
set s1 fx(filter low '{cutoff.value()}' 0.4)
set s1 super(3 '{detune.value()}')
set s1 fx(degrade '{degrade.value()}')
set s1 fx(fuzz '{distort.value()}' 0.6)
set s1 fx(reverb 0.5 '{verb.value()}')
`
// 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>