mercury-engine
Version:
The mercury engine generates web audio output from mercury code input
79 lines (63 loc) • 2.49 kB
HTML
<html>
<head>
<title>Load Samples</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';">
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.
</p>
<!-- 2 buttons in the html page -->
<button id="b1">start</button>
<button id="b2">silence</button>
<p id="sample-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;
// this function is called when all other samples are loaded
function loadExtraSounds(){
// add a sample from a url using json in the format { name: url }.
// The _base key allows you to set the same url for all the filenames
// See the file to inspect the content
let samples =
'https://raw.githubusercontent.com/tmhglnd/mercury-engine/main/examples/samples/freesound-samples.json';
// add them to the engine
Engine.addBuffers(samples, () => {
console.log('Extra samples from JSON Loaded!', Engine.getBuffers());
});
}
// Initialize a Mercury engine with callback function when loaded
const Engine = new Mercury({
onload: () => {
console.log('The engine and sounds are loaded!', Engine.getBuffers());
// load extra sounds from json url
loadExtraSounds();
}
});
// print things to the html
window.addEventListener('mercuryLog', (e) => {
let p = JSON.stringify(e.detail).replace(/\,/g, ' ').replace(/\"/g, '');
document.getElementById('sample-status').innerHTML += `${p}<br>`;
});
// Some mercury code initially created
const sampleCode = `
set tempo 130
new sample psykick time(1/4)
new sample snare_short time(1/16) play(euclid(7 3)) gain(0.5)
new sample hat_short time(1/4 1/8) gain(1.3)
`
// evaluate the code on the click of a button
let b1 = document.getElementById('b1');
b1.onclick = () => Engine.code(sampleCode);
// stop the code on the click of a button
let b2 = document.getElementById('b2');
b2.onclick = () => Engine.silence();
</script>
</body>
</html>