From a135d0fd04afb15e1dff3b3f152b5f977be8de04 Mon Sep 17 00:00:00 2001
From: dpapasia <daniel@papasian.org>
Date: Thu, 23 Apr 2026 11:33:45 -0400
Subject: [PATCH] Provide a mechanism for downloading the params (json format)
 as well as the track. (#2154)

This is very similar to 'load params' followed by 'Export JSON' but this names the json immediately following the same convention that is used for the music download. This is very useful if intending to always download the params for every track that you're downloading, as it saves you from having to rename one of the downloads.
---
 embd_res/kcpp_musicui.embd | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/embd_res/kcpp_musicui.embd b/embd_res/kcpp_musicui.embd
index c2ddf99b8..31d227c56 100644
--- a/embd_res/kcpp_musicui.embd
+++ b/embd_res/kcpp_musicui.embd
@@ -756,7 +756,7 @@ async function generateSong(){
   }
 }
 
-function loadTrackJSON(id){
+function loadTrack(id, callback) {
   const tx = db.transaction(STORE, "readonly");
   const store = tx.objectStore(STORE);
   const req = store.get(id);
@@ -767,10 +767,7 @@ function loadTrackJSON(id){
       showMessage("No JSON data found.");
       return;
     }
-
-    const data=(item.params);
-    updateForm(data);
-
+    callback(item.params);
   };
 
   req.onerror = function(){
@@ -778,6 +775,21 @@ function loadTrackJSON(id){
   };
 }
 
+function loadTrackJSON(id){
+  loadTrack(id, updateForm);
+}
+
+function exportTrackJSON(id, title) {
+  loadTrack(id, function(data) {
+    const blob=new Blob([JSON.stringify(data,null,2)],{type:"application/json"});
+    const url=URL.createObjectURL(blob);
+    const a=document.createElement("a");
+    a.href=url;
+    a.download=`${title}.json`;
+    a.click();
+  })
+}
+
 /* Library functions unchanged */
 
 function loadLibrary(){
@@ -807,11 +819,14 @@ function loadLibrary(){
           <audio controls src="${url}"></audio>
           <div style="margin-top:6px;display:flex;gap:6px;">
             <a href="${url}" download="${item.title}${savfmt}">
-                <button class="secondary">Download</button>
+                <button class="secondary">Download Track</button>
             </a>
             <button class="secondary" onclick="loadTrackJSON(${item.id})">
                 Load Params
             </button>
+            <button class="secondary" onclick="exportTrackJSON(${item.id}, '${item.title}')">
+                Download Params
+            </button>
 
             <button class="danger" onclick="deleteTrack(${item.id})">Delete</button>
           </div>