diff --git a/cook_tracks.sh b/cook_tracks.sh
new file mode 100755
index 0000000..cb60463
--- /dev/null
+++ b/cook_tracks.sh
@@ -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
diff --git a/tools/track_listing_generator.py b/tools/track_listing_generator.py
index 4f086fb..d9087f5 100755
--- a/tools/track_listing_generator.py
+++ b/tools/track_listing_generator.py
@@ -17,26 +17,43 @@ page = """<!DOCTYPE html>
     <script type="text/javascript">
         (function (window, document) {
             if (!window.XMPlayer)
-              window.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) {
+                if (!was_init) {
+                    XMPlayer.init();
+                    was_init = true;
+                }
                 var request = new XMLHttpRequest();
-                request.responseType = "arraybuffer";
+                request.responseType = `text`;
                 request.open('GET', url);
                 request.send();
-                request.onload = (_) => {
+                request.onload = async(_) => {
                     if (request.readyState === 4 && request.status === 200) {
                         XMPlayer.stop();
-                        XMPlayer.load(request.response);
+                        XMPlayer.load(await (await decompressGzippedBase64(request.response)).arrayBuffer());
                         XMPlayer.play();
                     }
                 }
             }
-
-            window.onload = function() {
-                XMPlayer.init();
-            }
         })(window, document)
     </script>
 </head>
@@ -64,7 +81,8 @@ page = """<!DOCTYPE html>
 for _, _, files in walk(argv[1]):
     files.sort()
     for f in files:
-        if not f.endswith('.xm'):
+        # note: Base64 gzip encoded data is expected.
+        if not f.endswith('.xm.txt'):
             continue
         page += (
             f"""        <div><p style="display: inline;">{f}</p><button style="float: right;" onclick="window.loadAndPlayTrack('/tracks/{f}')">play</button></div>\n"""
