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) {
return (t * 40 >> 430 | t * 40 >> 4) * 430;
});