mercury-engine
Version:
The mercury engine generates web audio output from mercury code input
74 lines (58 loc) • 2.28 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.
</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;
// Initialize a Mercury engine with callback function when loaded
const Engine = new Mercury({
onload: () => {
console.log('The engine and sounds are loaded!');
}
});
// 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>`;
});
// add a sample from a url using an array.
// The first value in the array determines the name of the file
let s1 = [ 'snare_short', 'https://cdn.freesound.org/previews/671/671221_3797507-lq.mp3'];
let s2 = [ 'psykick', 'https://cdn.freesound.org/previews/145/145778_2101444-lq.mp3' ];
let s3 = [ 'hat_short', 'https://cdn.freesound.org/previews/222/222058_1676145-lq.mp3' ];
// the array contains the arrays of [name, url]
let samples = [s1, s2, s3];
// add them to the engine
Engine.addBuffers(samples);
// 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>