veclavtalica/mjestecko
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gzipped base64 tracks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
articles/xm-tracks/page.mmd
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

36
tools/track_listing_generator.py
View File

@ -18,25 +18,42 @@ page = """<!DOCTYPE html>
(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"
) )