JS Promise resolve not working on first iteration

  async function playWithSound(pathArrangement, i, len) {

         const synth = window.speechSynthesis;
         pathid = pathArrangement[i];
         script = scriptData[pathData[pathid].name];

         console.log(script)

         const utterance = new SpeechSynthesisUtterance(script);
         utterance.voice = neerjaVoice || synth.getVoices()[0];

         await synth.speak(utterance);
         utterance.onstart = () => {
            document.getElementById(pathid).style.animationPlayState = 'running';
            followPencil(pathid);
         }



         // Create a promise that resolves when the speech synthesis ends
         const speechEndPromise = new Promise((resolve) => {
            utterance.onend = resolve;
         });

         const animationEndPromise = new Promise((resolve) => {
            document.getElementById(pathid).addEventListener('animationend', () => {
               resolve();
            }, { once: true });
         });
         // wait for promises to resolve and call the next stack
         await Promise.all([animationEndPromise, speechEndPromise]);
         console.log("resolved both")

         i++;
         if (i < len) {
            playWithSound(pathArrangement, i, len);
         }
         return;
      }