Test music upload

404.html

@@ -79,9 +79,9 @@
             <li class="nav-item">
                 <a
                         class="nav-link nav-abt fs-5 link-light active"
-                        href="/features.html"
+                        href="/kits.html"
                         style="font-family: 'Prosa GT Demo'"
-                >Features</a
+                >Kits</a
                 >
             </li>
             <li class="nav-item">

assets/css/testmusic.css

@@ -0,0 +1,135 @@
+:root {
+    --primary: #FED103;
+    --primary-hover: #ffee96;
+    --bg: #939393;
+    --secondary: #ff0400;
+    --secondary-hover: #ff7871;
+    --dropzone-bg: #00416C;
+    --gray: #D3D3D3;
+    --border: #333333;
+    --dropzone-border: #FFF;
+    --headline: white;
+    --text: white;
+    --primary-text: #00416C;
+    --dropzone-over: #00558a;
+}
+
+#random-chord {
+    font-size: 2rem;
+    font-weight: bold;
+}
+
+.dropzone-box {
+    border-radius: 1rem;
+    padding: 5rem;
+    justify-content: center;
+    flex-direction: column;
+    max-width: 36rem;
+    min-width: 500px; /* Add this line */
+    border: 1px solid var(--border);
+    background: var(--dropzone-bg);
+    margin: auto;
+    display: flex;
+    width: 50%;
+}
+
+.dropzone-box h2 {
+    font-size: 1.4rem;
+    margin-bottom: 0.6rem;
+    color: var(--headline);
+}
+
+.dropzone-box p {
+    font-size: 1.15rem;
+    color: var(--gray);
+}
+
+.dropzone-area {
+    padding: 1rem;
+    position: relative;
+    margin-top: 1.5rem;
+    min-height: 16rem;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border: 2px dashed var(--dropzone-border);
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.dropzone-area .file-info {
+    font-size: 1.1rem;
+}
+
+.dropzone-area [type="file"] {
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.dropzone-area .file-upload-icon svg {
+    height: 6rem;
+    max-width: 6rem;
+    width: 100%;
+    margin-bottom: 0.5rem;
+    stroke: var(--headline);
+}
+
+.dropzone-area:hover {
+    background: var(--dropzone-over);
+}
+
+.dropzone--over {
+    border: 2px solid var(--primary);
+    background: var(--dropzone-over);
+}
+
+.dropzone-actions {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 2rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.dropzone-actions button {
+    flex-grow: 1;
+    min-height: 3rem;
+    font-size: 1.2rem;
+    border: none;
+    transition: background 0.3s ease;
+}
+
+
+.dropzone-actions button[type='reset'] {
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    color: var(--text);
+    background: var(--secondary);
+    cursor: pointer;
+    border: 1px solid var(--border);
+}
+
+.dropzone-actions button[type='reset']:hover {
+    background: var(--secondary-hover);
+}
+
+.dropzone-actions button[type='submit'] {
+    border-radius: 0.5rem;
+    padding: 0.5rem 1rem;
+    color: var(--primary-text);
+    border: none;
+    cursor: pointer;
+    background-color: #FED103;
+}
+
+.dropzone-actions button[type='submit']:hover {
+    background: var(--primary-hover);
+}

assets/js/test.js

@@ -0,0 +1,178 @@
+const dropzoneBox = document.getElementsByClassName("dropzone-box")[0];
+const inputFiles = document.querySelectorAll(
+  ".dropzone-area input[type='file']"
+);
+
+const correctChords = ["C", "D", "G"];
+const inputElement = inputFiles[0];
+
+const dropZoneElement = inputElement.closest(".dropzone-area");
+
+// List of chords
+const chords = ["C A D", "D E G", "E F A", "F C D", "G D C", "C F G", "A C E"];
+
+// Function to get a random chord from the list
+function getRandomChord() {
+  const randomIndex = Math.floor(Math.random() * chords.length);
+  return chords[randomIndex];
+}
+
+// Update the content of the div with a random chord
+document.addEventListener("DOMContentLoaded", function() {
+  // Your JavaScript code goes here
+  document.getElementById('random-chord').textContent = "Play these notes: " + getRandomChord();
+});
+
+inputElement.addEventListener("change", (e) => {
+  if (inputElement.files.length) {
+    updateDropzoneFileList(dropZoneElement, inputElement.files[0]);
+  }
+});
+
+dropZoneElement.addEventListener("dragover", (e) => {
+  e.preventDefault();
+  dropZoneElement.classList.add("dropzone--over");
+});
+
+["dragleave", "dragend"].forEach((type) => {
+  dropZoneElement.addEventListener(type, (e) => {
+    dropZoneElement.classList.remove("dropzone--over");
+  });
+});
+
+dropZoneElement.addEventListener("drop", (e) => {
+  e.preventDefault();
+
+  if (e.dataTransfer.files.length) {
+    inputElement.files = e.dataTransfer.files;
+
+    updateDropzoneFileList(dropZoneElement, e.dataTransfer.files[0]);
+  }
+
+  dropZoneElement.classList.remove("dropzone--over");
+});
+
+const updateDropzoneFileList = (dropzoneElement, file) => {
+  let dropzoneFileMessage = dropzoneElement.querySelector(".file-info");
+
+  if (!file.type.startsWith("audio/")) {
+    dropzoneFileMessage.innerHTML = `Invalid file type. Please upload an audio file.`;
+    return;
+  }
+
+  dropzoneFileMessage.innerHTML = `
+        ${file.name}, ${file.size} bytes
+    `;
+};
+
+dropzoneBox.addEventListener("reset", (e) => {
+  let dropzoneFileMessage = dropZoneElement.querySelector(".file-info");
+
+  dropzoneFileMessage.innerHTML = `No Files Selected`;
+});
+
+dropzoneBox.addEventListener("submit", async (e) => {
+  e.preventDefault();
+  document.getElementById('loading-screen').style.display = 'block';
+
+  const myFile = document.getElementById("upload-file");
+  var file = myFile.files[0];
+  console.log(file);
+
+  //get time now
+  var date = new Date();
+  var time = date.getTime();
+
+  // Replace with your actual API key
+  const apiKey = "e1582db2-6ef0-4bb7-a1cd-f08c76125a12";
+
+  // Make a GET request to get the uploadUrl
+  fetch("https://api.music.ai/api/upload", {
+    method: "GET",
+    headers: {
+      Authorization: apiKey,
+    },
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      const uploadUrl = data.uploadUrl;
+      const audioUrl = data.downloadUrl;
+
+      // Convert the file to a blob
+      const blob = new Blob([file], { type: file.type });
+
+      // Make a PUT request to upload the audio file
+      fetch(uploadUrl, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "audio/mpeg",
+        },
+        body: blob,
+      }).then((response) => {
+        if (response.ok) {
+          console.log("Upload successful");
+          console.log(response);
+
+          // Make a POST request to create a job
+          fetch("https://api.music.ai/api/job", {
+            method: "POST",
+            headers: {
+              Authorization: apiKey,
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: "Chords Website " + time,
+              workflow: "chords-detection",
+              params: {
+                inputUrl: audioUrl,
+              },
+            }),
+          })
+            .then((response) => response.json())
+            .then((data) => {
+              console.log("Job created successfully", data);
+
+              var jobId = data.id;
+              // Add a delay of 5 seconds before making the GET request
+              setTimeout(() => {
+                // Make a GET request to get the job details
+                fetch(`https://api.music.ai/api/job/${jobId}`, {
+                  method: "GET",
+                  headers: {
+                    Authorization: apiKey,
+                  },
+                })
+                  .then((response) => response.json())
+                  .then(async (data) => {
+                    console.log("Job details:", data);
+                    var chordsJSON = data.result.chordsJSON;
+
+                    const response = await fetch(chordsJSON);
+                    console.log(response);
+                    // Now you can access the data in the JSON
+                    console.log(data);
+                    document.getElementById('results').textContent = `You got ${correctLetters} notes right.`;
+                    document.getElementById('loading-screen').style.display = 'none';
+                    document.querySelector('.dropzone-box').style.display = 'none';
+                  })
+                  .catch((error) => {
+                    document.getElementById('loading-screen').style.display = 'none';
+                    document.getElementById('error-message').textContent = `Error: ${error.message}`;
+                    console.error("Error:", error)
+                  });
+              }, 10000); // Delay of 5 seconds
+            })
+            .catch((error) => {
+              console.error("Error:", error);
+              document.getElementById('error-message').textContent = `Error: ${error.message}`;
+              document.getElementById('loading-screen').style.display = 'none';
+            });
+        } else {
+          console.error("Upload failed");
+          document.getElementById('error-message').textContent = `Error: Upload failed. ${error.message}`;
+          document.getElementById('loading-screen').style.display = 'none';
+        }
+      });
+    })
+    .catch((error) => console.error("Error:", error));
+});

fll.html

@@ -119,7 +119,7 @@
             <li class="nav-item">
               <a
                       class="nav-link nav-abt fs-5 link-light active"
-                      href="/features.html"
+                      href="/kits.html"
                       style="font-family: 'Prosa GT Demo'"
               >Features</a
               >