JSFiddle - React, Tailwind, and code Playground
HTML
<script>
var sampleRate = 8000;
function encodeAudio8bit(data) {
var n = data.length;
var integer = 0,
i;
var header = 'RIFF<##>WAVEfmt \x10\x00\x00\x00\x01\x00\x01\x00<##><##>\x01\x00\x08\x00data<##>';
function insertLong(value) {
var bytes = "";
for (i = 0; i < 4; ++i) {
bytes += String.fromCharCode(value % 256);
value = Math.floor(value / 256);
}
header = header.replace('<##>', bytes);
}
insertLong(36 + n);
insertLong(sampleRate);
insertLong(sampleRate);
insertLong(n);
for (var i = 0; i < n; ++i) {
header += String.fromCharCode(Math.round(Math.min(1, Math.max(-1, data[i])) * 127 + 127));
}
return 'data:audio/wav;base64,' + btoa(header);
}
function addFractalMusic(func) {
var elem = document.getElementById('a1');
var len = 8000*60*3.5;
var arr = []
for (var t = 0; t < len; t++) {
arr[t] = func(t);
arr[t] = (arr[t] & 0xff) / 256.0;
}
var dataUri = encodeAudio8bit(arr);
elem.setAttribute('src', dataUri);
}
</script>
<div class='post'>
<div class='postinner'>
<audio controls='true' id='a1'></audio>
</div>
</div>
JavaScript
addFractalMusic(function(t) {
var sb, y, h, a, d, g, wave, drum, instrument,
backgroundWaveNotes = [15, 15, 23, 8],
mainInstrumentNotes = [[15, 18, 17, 17, 17, 17, 999, 999, 22, 22, 999, 18, 999, 15, 20, 22], [20, 18, 17, 17, 10, 10, 999, 999, 20, 22, 20, 18, 17, 18, 17, 10]];
sb = (t > 0xffff ? 1 : 0);
y = Math.pow(2, backgroundWaveNotes[t >> 14 & 3] / 12);
a = 1 - ((t & 0x7ff) / 0x7ff);
d = ((14 * t * t ^ t) & 0x7ff);
g = (t & 0x7ff) / 0x7ff;
g = 1 - (g * g);
h = Math.pow(2, mainInstrumentNotes[((t >> 14 & 3) > 2 ? 1 : 0) & 1][t >> 10 & 15] / 12);
wave = (Math.floor(y * t * 0.241) & 127 - 64) + (Math.floor(y * t * 0.25) & 127 - 64) * 1.2;
drum = ((Math.floor((Math.floor(5 * t) & 0x7ff) * a) & 255 - 127) * ((0x53232323 >> (t >> 11 & 31)) & 1) * a * 1.0 + (Math.floor(d * a) & 255 - 128) * ((0xa444c444 >> (t >> 11 & 31)) & 1) * a * 1.5 + (Math.floor((a * a * d * (t >> 9 & 1))) & 0xff - 0x80) * 0.1337) * sb;
instrument = ((Math.floor(h * t) & 31) + (Math.floor(h * t * 1.992) & 31) + (Math.floor(h * t * .497) & 31) + (Math.floor(h * t * 0.977) & 31)) * g * sb;
return Math.max(Math.min((wave + drum + instrument) / 3, 127), -128);
});