JSFiddle - React, Tailwind, and code Playground
HTML
<button id="play">play</button>
JavaScript
! function(a, b) {
"function" == typeof define && define.amd ? define(["exports"], b) : b("object" == typeof exports && "string" != typeof exports.nodeName ? exports : a.TinyMusic = {})
}(this, function(a) {
function b(a) {
var c = a.split(h);
this.frequency = b.getFrequency(c[0]) || 0, this.duration = b.getDuration(c[1]) || 0
}
function c(a, b, c) {
this.ac = a || new AudioContext, this.createFxNodes(), this.tempo = b || 120, this.loop = !0, this.smoothing = 0, this.staccato = 0, this.notes = [], this.push.apply(this, c || [])
}
var d = "B#-C|C#-Db|D|D#-Eb|E-Fb|E#-F|F#-Gb|G|G#-Ab|A|A#-Bb|B-Cb",
e = 440 * Math.pow(Math.pow(2, 1 / 12), - 9),
f = /^[0-9.]+$/,
g = 4,
h = /\s+/,
i = /(\d+)/,
j = {};
d.split("|").forEach(function(a, b) {
a.split("-").forEach(function(a) {
j[a] = b
})
}), b.getFrequency = function(a) {
var b = a.split(i),
c = j[b[0]],
d = (b[1] || g) - g,
f = e * Math.pow(Math.pow(2, 1 / 12), c);
return f * Math.pow(2, d)
}, b.getDuration = function(a) {
return f.test(a) ? parseFloat(a) : a.toLowerCase().split("").reduce(function(a, b) {
return a + ("w" === b ? 4 : "h" === b ? 2 : "q" === b ? 1 : "e" === b ? .5 : "s" === b ? .25 : 0)
}, 0)
}, c.prototype.createFxNodes = function() {
var a = [
["bass", 100],
["mid", 1e3],
["treble", 2500]
],
b = this.gain = this.ac.createGain();
return a.forEach(function(a, c) {
c = this[a[0]] = this.ac.createBiquadFilter(), c.type = "peaking", c.frequency.value = a[1], b.connect(b = c)
}.bind(this)), b.connect(this.ac.destination), this
}, c.prototype.push = function() {
return Array.prototype.forEach.call(arguments, function(a) {
this.notes.push(a instanceof b ? a : new b(a))
...