Merge pull request fac29b#60 from fac29b/audio-caching

Audio caching

Author: samscupoftea

public/index.html

@@ -126,6 +126,7 @@ <h1 aria-label="app text" class="headline">
 
       <div class="test">
         <div class="recording">
+          <source class="audio_source" type="audio/mpeg">
           <i class="fa-solid fa-microphone" name="microphone"></i>
           <i class="fa-solid fa-pause" name="pause"></i>
           <i class="fa-solid fa-stop" name="stop"></i>
@@ -134,6 +135,23 @@ <h1 aria-label="app text" class="headline">
           <input type="number" name="speed" id="speed" min="0.25" max="2" step="0.25" value="1">
           </div>
         </div>
+        <!-- <div class="audio-container">
+          <audio class="recording" controls>
+            <source class="audio_source" src="" type="audio/mpeg">
+            Your browser does not support the audio element.
+          </audio>
+          <div class="controls">
+            <i class="fa-solid fa-microphone" name="microphone"></i>
+            <i class="fa-solid fa-pause" name="pause"></i>
+            <i class="fa-solid fa-stop" name="stop"></i>
+            <div class="speed-wrapper">
+              <label for="speed">Speed</label>
+              <input type="number" name="speed" id="speed" min="0.25" max="2" step="0.25" value="1">
+            </div>
+          </div>
+        </div> -->
+        
+
         <div id="loading-container">
           <div id="loading-indicator"></div>
           <h3 id="loading-text">Creating audio and image...</h3>

public/index.js

@@ -52,9 +52,17 @@ import {
   emailUserRecipeSection,
 } from "./js_utilities/query_selector.js";
 
-let audioElement;
+
+ let audioElement = new Audio();
+
 let emailObject
 
+const audio_source = document.querySelector(".audio_source");
+
+console.log(audio_source)
+
+
+
 
 
 wantToTakeAPicture.addEventListener("click", () => {
@@ -169,6 +177,33 @@ recipeButtons.forEach((button) => {
     console.log(userRecipe);
 
     const CACHE_NAME = 'image-cache-v1';
+    const CACHE_NAME_AUDIO = 'image-cache-v2'
+
+
+    // Function to cache the audio (without fetching the audio)
+    async function cacheAudio(audio) {
+      const cache = await caches.open(CACHE_NAME_AUDIO);
+      const response = new Response(JSON.stringify({audio, timestamp: Date.now()}));
+      await cache.put("last-generated-audio", response);
+    }
+
+    // Funnction to get the cached audio data
+    async function getCachedAudio() {
+      const cache = await caches.open(CACHE_NAME_AUDIO);
+      const response = await cache.match("last-generated-audio");
+      if (response) {
+        const data = await response.json();
+        const now = Date.now();
+        if (now - data.timestamp < 24 *  60  * 60  * 1000) {
+          return data.url;
+        } else {
+          await cache.delete("last-generated-audio")
+        }
+      }
+      return null
+    }
+
+
 
     // Function to cache the image URL (without fetching the image)
     async function cacheImageUrl(url) {
@@ -218,15 +253,21 @@ recipeButtons.forEach((button) => {
       }
 
       if (data.audio) {
+      
         console.log(data.audio);
-        loadingText.innerHTML = "Hang in there creating the audio and image...";
+  
+        const audio_data = createAudio(data.audio);
+        console.log(`line 261: ${audio_data}`)
+        // Cache the url object
+        await cacheAudio(audio_data)
+        
         displayElementsFlex([recording]);
         displayElements([sendRecipeToUserInboxBtn, userWantAnotherRecipe]);
 
         const speechBtns = Array.from(document.querySelectorAll(".fa-solid"));
         const speedBtn = document.querySelector("#speed");
 
-        audioElement = createAudio(data.audio);
+        audioElement.src = createAudio(data.audio);
 
         audioElement.stop = function () {
           this.pause();
@@ -235,7 +276,7 @@ recipeButtons.forEach((button) => {
 
         userWantAnotherRecipe.addEventListener("click", () => {
           displayElements([headline, allergies, ...recipeButtons, mainElement]);
-          removeElements([userText, emailSection]);
+          removeElements([userText, emailSection, recording]);
           emptyTheElement(gptResponseElement);
           resetCheckedStateToFalse(dietaryRequirements);
           userText.value = "";
@@ -269,10 +310,20 @@ recipeButtons.forEach((button) => {
          await cacheImageUrl(imageUrl);
          backgroundImg.addEventListener("load", () => {
           backgroundImg.src = imageUrl;
+          loadingText.textContent = "Hang in there creating the audio...";
+      
          })
       }
     };
 
+// Before setting up the eventSource, check for a cached audio
+async function loadCachedAudio() {
+  const cachedAudio = await getCachedAudio();
+  if (cachedAudio) {
+    audioElement.src = cachedAudio;
+  }
+}
+
 // Before setting up the eventSource, check for a cached image URL
 async function loadCachedImage() {
   const cachedImageUrl = await getCachedImageUrl();
@@ -283,6 +334,7 @@ async function loadCachedImage() {
 
 // Call this function before setting up the eventSource
 loadCachedImage();
+loadCachedAudio();
   });
 });
 

public/js_utilities/functions_and_variables.js

@@ -143,9 +143,10 @@ function createAudio(data) {
   }
 
   const audioBlob = new Blob([audioData], { type: "audio/mpeg" });
-  const audioElement = new Audio();
-  audioElement.src = URL.createObjectURL(audioBlob);
-  return audioElement;
+  return URL.createObjectURL(audioBlob)
+  // const audioElement = new Audio();
+  // audioElement.src = URL.createObjectURL(audioBlob);
+  // return audioElement;
 
 }
 

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-7QfOfKjbs44oxr2AcVgWr2eb.png?st=2024-07-24T14%3A17%3A08Z&se=2024-07-24T16%3A17%3A08Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-23T22%3A52%3A27Z&ske=2024-07-24T22%3A52%3A27Z&sks=b&skv=2023-11-03&sig=uhjzjezOQlgWwMf6NMQFq40rv0IOlE2BFDshIM0IiX8%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-wXGzIn0FQALmWRTlYIzucreH.png?st=2024-07-26T15%3A35%3A54Z&se=2024-07-26T17%3A35%3A54Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-25T23%3A14%3A25Z&ske=2024-07-26T23%3A14%3A25Z&sks=b&skv=2023-11-03&sig=hY%2B55WDAQiPx4ga97zVQEZZHXcM3DVFJAX2ZLgGNcvA%3D