massively refactor the whole thing

.github/workflows/ci.yml

@@ -1,44 +1,32 @@
-name: Create and publish a Docker image
-
 on:
   push:
     branches: ["master"]
 
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-  # PLATFORMS: linux/amd64,linux/arm64
-  PLATFORMS: linux/amd64
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
 
 jobs:
-  build-and-push-image:
+  pages:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-      # - name: Set up QEMU
-      #   uses: docker/setup-qemu-action@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      - name: Log in to the Container registry
-        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-      - name: Build and push Docker image
-        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
-        with:
-          context: .
-          platforms: ${{ env.PLATFORMS }}
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 22 }
+      - run: npm ci
+      - run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        with: { path: dist }
+      - uses: actions/deploy-pages@v4
+        id: deployment

.gitignore

@@ -3,4 +3,5 @@
 
 /node_modules/
 /dist/*
+!/dist/index.html
 !/dist/libav*

README.md

@@ -18,38 +18,19 @@ All other code and assets are published under the [MIT license].
 [in the repo]: https://github.com/iliazeus/punkomatic-js/tree/master/data
 [MIT license]: https://github.com/iliazeus/punkomatic-js/tree/master/LICENSE
 
-#### In browser
-
-```html
-<script type="module">
-  import * as pm from "./punkomatic.browser.js";
-
-  // render a song to a WAV blob
-  const blob = await pm.renderSong({
-    sampleDir: "./path-to/samples",
-    songData: "<your song data here>",
-    compress: true, // slower, but file takes less space
-  }); // returns a Promise<Blob>
-
-  // to play or download it:
-  const url = URL.createObjectUrl(blob);
-  document.querySelector("audio#my-song").src = url;
-</script>
-```
-
-#### In Node
-
 ```ts
 // ESM only
-import * as pm from "punkomatic.js";
+import * as pm from "./punkomatic.browser.js";
+
+const song = pm.parseSong(songData);
+const audio = await pm.renderSong(song, { baseSoundPath: "./path-to/samples" });
+const file = await pm.encodeSong(song, audio, { compress: true });
 
-const blob = await pm.renderSong({
-  sampleDir: "./path-to/samples",
-  songData: "<your song data here>",
-  compress: true, // slower, but file takes less space; may currently be broken in Node
-}); // returns a Promise<Blob>
+// to play or download it in browser:
+const url = URL.createObjectUrl(file);
+document.querySelector("audio#my-song").src = url;
 
-// to write it to a file:
+// to write it to a file in Node.js:
 const fs = require("node:fs/promises");
 await fs.writeFile("output.wav", new Buffer(await blob.arrayBuffer()));
 ```

index.html → dist/index.html

@@ -29,7 +29,7 @@ <h1>Punk-O-Matic 2 Online MP3 Converter</h1>
       ></textarea>
     </div>
     <script type="module">
-      import * as pm from "./dist/punkomatic.browser.js";
+      import * as pm from "./punkomatic.browser.js";
 
       const songDataTextarea = document.getElementById("song-data-textarea");
       const convertButton = document.getElementById("convert-button");
@@ -43,16 +43,21 @@ <h1>Punk-O-Matic 2 Online MP3 Converter</h1>
           try {
             convertButton.disabled = true;
             document.querySelectorAll("button").forEach((el) => (el.disabled = true));
-            statusDiv.innerHTML = "";
-            const blob = await pm.renderSong({
-              songData: songDataTextarea.value,
-              sampleDir: "./data",
-              compress,
-              log: (text, progress) =>
-                (statusDiv.innerText = progress
-                  ? `${text} (${progress.current}/${progress.total})`
-                  : text),
+
+            statusDiv.innerText = "parsing song data...";
+            const song = pm.parseSong(songDataTextarea.value);
+
+            statusDiv.innerText = "rendering song...";
+            const audio = await pm.renderSong(song, {
+              baseSoundPath: "./data",
+              onprogress: (c, t) => {
+                statusDiv.innerText = `rendering... ${((100 * c) / t).toFixed(2)}% done`;
+              },
             });
+
+            statusDiv.innerText = "encoding song...";
+            const blob = await pm.encodeSong(song, audio, { compress });
+
             const url = URL.createObjectURL(blob);
             audioElement.src = url;
             statusDiv.innerHTML = `<a download href="${url}">Download</a>`;