gzipped base64 tracks

This commit is contained in:
veclav talica 2023-05-25 11:14:13 +05:00
parent 6792c09295
commit 3bdca949e6
3 changed files with 37 additions and 12 deletions

View File

@ -9,5 +9,3 @@ It's achieved with help of [jsxm](https://github.com/a1k0n/jsxm).
It lacks support for some things though, might need to contribute to it. It lacks support for some things though, might need to contribute to it.
Could be neat to make some small program that would generate waveforms pngs next. Could be neat to make some small program that would generate waveforms pngs next.
Sadly .xm file format is not allowed on Neocities, so, it would not work for you most likely :p

9
cook_tracks.sh Executable file
View File

@ -0,0 +1,9 @@
#!/usr/bin/bash
set +e
shopt -s extglob
for f in $1/!(*AutoSave*).xm
do
gzip -c $f | base64 --wrap=0 - | tr -d '\n' > $2/$(basename -- $f).txt
done

View File

@ -17,26 +17,43 @@ page = """<!DOCTYPE html>
<script type="text/javascript"> <script type="text/javascript">
(function (window, document) { (function (window, document) {
if (!window.XMPlayer) if (!window.XMPlayer)
window.XMPlayer = {}; window.XMPlayer = {};
var XMPlayer = window.XMPlayer; var XMPlayer = window.XMPlayer;
var was_init = false
// https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript
function b64toBlob(base64) {
const decoded = atob(base64);
const uInt8Array = new Uint8Array(decoded.length);
for (let i = 0; i < decoded.length; ++i)
uInt8Array[i] = decoded.charCodeAt(i);
return new Blob([uInt8Array]);
}
async function decompressGzippedBase64(str) {
const ds = new DecompressionStream(`gzip`);
const decompressedStream = b64toBlob(str).stream().pipeThrough(ds);
return new Response(decompressedStream).blob();
}
window.loadAndPlayTrack = function(url) { window.loadAndPlayTrack = function(url) {
if (!was_init) {
XMPlayer.init();
was_init = true;
}
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.responseType = "arraybuffer"; request.responseType = `text`;
request.open('GET', url); request.open('GET', url);
request.send(); request.send();
request.onload = (_) => { request.onload = async(_) => {
if (request.readyState === 4 && request.status === 200) { if (request.readyState === 4 && request.status === 200) {
XMPlayer.stop(); XMPlayer.stop();
XMPlayer.load(request.response); XMPlayer.load(await (await decompressGzippedBase64(request.response)).arrayBuffer());
XMPlayer.play(); XMPlayer.play();
} }
} }
} }
window.onload = function() {
XMPlayer.init();
}
})(window, document) })(window, document)
</script> </script>
</head> </head>
@ -64,10 +81,11 @@ page = """<!DOCTYPE html>
for _, _, files in walk(argv[1]): for _, _, files in walk(argv[1]):
files.sort() files.sort()
for f in files: for f in files:
if not f.endswith('.xm'): # note: Base64 gzip encoded data is expected.
if not f.endswith('.xm.txt'):
continue continue
page += ( page += (
f""" <div><p style="display: inline;">{f}</p><button style="float: right;" onclick="window.loadAndPlayTrack('/tracks/{f}')">play</button></div>\n""" f""" <div><p style="display: inline;">{f[:-4]}</p><button style="float: right;" onclick="window.loadAndPlayTrack('/tracks/{f}')">play</button></div>\n"""
" <hr/>\n" " <hr/>\n"
) )