Skip to content

Instantly share code, notes, and snippets.

@cat-in-136

cat-in-136/README.md

Last active February 20, 2016 04:58
Show Gist options
  • Save cat-in-136/4916d69f814bedb584eb to your computer and use it in GitHub Desktop.
Save cat-in-136/4916d69f814bedb584eb to your computer and use it in GitHub Desktop.
Download ZIP
WebAudio Test
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WebAudio Test - js do it</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
</head>
<body>
<!-- generated by: jsdo.it - http://jsdo.it/cat_in_136/xtDC -->
<!-- Copyright cat_in_136 - http://jsdo.it/cat_in_136 -->
<!-- Licensed under MIT License - http://www.opensource.org/licenses/mit-license.php -->
<input type="button" id="play-webaudio-test-play-btn" value="Play" disabled="disabled" />
<label>Vol:
<input type="range" id="play-webaudio-test-vol-ctrl" value="80" disabled="disabled" />
</label>
<output id="play-webaudio-test-output">Javascript is disabled.</output>
<script>
(function () {
try {
const MODE_FREQ_TABLE = {
"C" : 261.63, // C
"C#": 277.18, // C#
"D" : 293.66, // D
"D#": 311.13, // D#
"E" : 329.63, // E
"F" : 349.23, // F
"F#": 369.99, // F#
"G" : 391.99, // G
"G#": 415.30, // G#
"A" : 440.00, // A // A440 (ISO 16:1975)
"A#": 466.16, // A#
"B" : 493.88 // B
}
const mml = "T120L4CDEFEDCREFGAGFERL4CRCRCRCRL16CRCRDRDRERERFRFRL4EDCR"; // Froschgesang (Deutscher Gesang)
var p = 0;
var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var gain = context.createGain();
gain.connect(context.destination);
document.getElementById("play-webaudio-test-vol-ctrl").addEventListener("change", function () {
var gainvalue = parseInt(document.getElementById("play-webaudio-test-vol-ctrl").value);
gain.gain.value = gainvalue / 100.0;
});
document.getElementById("play-webaudio-test-vol-ctrl").dispatchEvent(new Event("change"));
document.getElementById("play-webaudio-test-play-btn").addEventListener("click", function () {
document.getElementById("play-webaudio-test-play-btn").setAttribute("disabled", "disabled");
document.getElementById("play-webaudio-test-output").innerHTML = "Playing";
var t0 = context.currentTime;
var tempo = 120;
var defLen = 4;
for (var i = 0; i < mml.length; i++) {
if (/^T(\d+)/.test(mml.substring(i))) {
var tempo = parseInt(RegExp.$1);
} else if (/^L(\d+)/.test(mml.substring(i))) {
var defLen = parseInt(RegExp.$1);
} else if (/^([A-G]#?)(\d+\.?)?/.test(mml.substring(i))) {
var mode = RegExp.$1;
var len = 1 / parseInt(RegExp.$2 || defLen);
if (RegExp.$2 && (RegExp.$2[RegExp.$2.length -1 ] == ".")) { len *= 1.5; };
len *= 60 * 4 / tempo;
var osc = context.createOscillator();
osc.frequency.value = MODE_FREQ_TABLE[mode];
osc.type = "sine";
osc.connect(gain);
osc.start(t0 + p);
osc.stop(t0 + (p+len));
p += len;
} else if (/^(R)(\d+\.?)?/.test(mml.substring(i))) {
var len = 1 / parseInt(RegExp.$2 || defLen);
if (RegExp.$2 && (RegExp.$2[RegExp.$2.length -1 ] == ".")) { len *= 1.5; };
len *= 60 * 4 / tempo;
p += len;
}
}
window.setTimeout(function () {
document.getElementById("play-webaudio-test-play-btn").removeAttribute("disabled");
document.getElementById("play-webaudio-test-output").innerHTML = "Ready.";
}, p * 1000 + 100);
}, false);
document.getElementById("play-webaudio-test-play-btn").removeAttribute("disabled");
document.getElementById("play-webaudio-test-vol-ctrl").removeAttribute("disabled");
document.getElementById("play-webaudio-test-output").innerHTML = "Ready.";
} catch (e) {
document.getElementById("play-webaudio-test-play-btn").setAttribute("disabled", "disabled");
document.getElementById("play-webaudio-test-vol-ctrl").setAttribute("disabled", "disabled");
document.getElementById("play-webaudio-test-output").innerHTML = "Error: could not use WebAudio.";
}
})();
</script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 1ex;
border: 0;
}
body {
background: #fff;
font: 30px sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment