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

@@ -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>