title: The promise resolves but the code doesn't proceed
body: <p>I have a wired issue with my function. you don't need to read and understand every part of the function although I've copied all the functions for you to have a look. The <code>MovieAudio</code> function has <code>PlayAudio()</code> function inside and it's where the issue exist ...</p>
  <p>We have this line of code inside <code>PlayAudio()</code> function:</p>
  <pre><code>console.log('before sfx');
  if(sfx) { await sfxPlay(sfx.before_listen); } 
  console.log('after sfx');
  </code></pre>
  <p>As you see we have two console logs right before and after this line. If <code>sfxPlay</code> promise resolves we should see the <code>console.log('after sfx');</code> but we never see this unfortunately!</p>
  <p>I have tested the <code>await sfxPlay(sfx.before_listen);</code> another place outside of this code and it works correctly!</p>
  <p>In the first sight I thought maybe <code>sfxPlay</code> function doesn't resolve correctly so I put <code>console.log('sfx has been resolved');</code> inside <code>sfxPlay</code> function to check if <code>sfxPlay</code> function is resolved correctly, and yes it resolves correctly but still we don't proceed to  <code>console.log('after sfx')</code></p>
  <p>Here is my console. note that we don't see <code>console.log('after sfx')</code> which we except to see of course:</p>
  <p><a href="https://i.stack.imgur.com/XkZ5U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XkZ5U.png" alt="enter image description here" /></a></p>
  <p>What am I missing? it seems simple but it doesn't behave correctly?</p>
  <pre><code>let StopMovieAudio;
  
  function MovieAudio(duration, stress, option = {}) {
  
      let movieAudioResolve;
      const speed = option.speed ? option.speed : 1;
      const sfx = option.sfx ? false : true;
      const guideIndex =  option.guideIndex ? [...Array(option.guideIndex).keys()] : []; 
      if(!stress) stress = { to: '__', from: '__', within: ['__-__'] };
      const guide = !!guideIndex.length;
      const video = document.createElement('video');
      document.body.appendChild(video);
      video.id = 'audio-clip'; 
      const clip = document.getElementById(&quot;audio-clip&quot;);
      clip.style.visibility = &quot;hidden&quot;;
      const source = document.createElement('source');
      source.src = getBlob(clipSource);
      source.type = 'video/mp4';
      video.appendChild(source);
      video.load();
      const start = duration.start + startPlus;
      const end = duration.end + endPlus;
  
      PlayAudio();
      
      async function PlayAudio() {
          clip.currentTime = start;
          clip.playbackRate = speed;
          console.log('sfx', sfx);
          console.log('before sfx');
          if(sfx) { await sfxPlay(sfx.before_listen); } // sfx is true and we enter the if block
          console.log('after sfx');
          StartAudio();
          const endCheck = setInterval(endCheckInterval, 5);
          function endCheckInterval() {
              guidePhraseUpper(guideIndex[0]);
              checkStopMovie();
          }
      } // end of Play function
  
      function checkStopMovie() {
          if (clip.currentTime &gt;= end) {
              clearInterval(endCheck);
              StopMovieAudio();
              guidePhrasesDown();
          }
      }
  
      function guidePhraseUpper(index) {
          if(!guideIndex.length) return;
          if (clip.currentTime &gt;= portionDurations[index].start) {
              guideIndex.shift();
              guidePhrasesDown();
              guidePhraseUp(movieSentenceArrayEn[index]);
          }
      }
  
      function guidePhrasesDown() {
          if(!guide) return;
          const component = $(`iframe[src*='${components.chief}']`)[0];
          referenceString.split(' ').forEach((phrase, index) =&gt; component.contentWindow.guideWordDown(index));
      }
  
      function StartAudio() {
          console.log('start of StartAudio');
          clip.volume = 1;
          clip.play();
          stressEffectTo();
          stressEffectFrom();
          stressEffectWithin();
      } 
  
      StopMovieAudio = () =&gt; {
          const audioClip = document.getElementById(&quot;audio-clip&quot;);
          if(audioClip) { document.body.removeChild(audioClip); }
          if(typeof StopMovieAudio === &quot;function&quot;) { movieAudioResolve(); }
      } 
  
      function stressEffectTo() {
          if(stress.to.includes('_')) { return; }
          clip.playbackRate = 0.75;
          speedUpFrom(stress.to);
      }
  
      function stressEffectFrom() {
          if(stress.from.includes('_')) { return; }
          clip.playbackRate = 1;
          speedDownFrom(stress.from);
      }
  
      function stressEffectWithin() {
          const stressWithin = stress.within.filter(w =&gt; !w.includes('_'));
          if(!stressWithin.length){ return; }
          for(let i = 0; i &lt; stressWithin.length; i++) {
              speedDownFrom(stressWithin[i].split('-')[0]);
              speedUpFrom(stressWithin[i].split('-')[1]);
          }
      } // end of stressEffectWithin function
  
      function speedUpFrom(timer) {
          const endCheck = setInterval(endCheckInterval, 5);
          function endCheckInterval() {
              if (clip.currentTime &gt;= timer) {
                  clearInterval(endCheck);
                  clip.playbackRate = 1;
              }
          }
      } // end of Track function
  
      function speedDownFrom(timer) {
          const endCheck = setInterval(endCheckInterval, 5);
          function endCheckInterval() {
              if (clip.currentTime &gt;= timer) {
                  clearInterval(endCheck);
                  clip.playbackRate = 0.7;
              }
          }
      } // end of Track function
  
      return new Promise(resolve =&gt; { 
          movieAudioResolve = resolve;
          console.log('Promise reached');
      });
  
  } // end of MovieAudio function
  
  let sfxPlayResolve;
  
  function sfxPlay(source) {
      return new Promise(resolve =&gt; { 
          sfxPlayResolve = resolve;
          const sfxAudio = new Audio(source);
          playingAudios.push(sfxAudio);
          sfxAudio.play();
          sfxAudio.onerror = function() {
              console.log(&quot;Error loading: &quot; + this.src);
              sfxPlay(sfx.no_sources);
              resolve(); 
          }
          sfxAudio.addEventListener(&quot;ended&quot;, function() {  
              sfxAudio.currentTime = 0;          
              resolve();    
              console.log('sfx has been resolved');    
          }); 
      });
  }
  </code></pre>
  <h2>Update</h2>
  <p>A Codepen has been added (I have commented the if block (where the issue exist) to show you the correct behavior of the function and You need to click on somewhere to play the audio of the video):</p>
  <p><a href="https://codepen.io/pixy-dixy/pen/mdOVgZw" rel="nofollow noreferrer">https://codepen.io/pixy-dixy/pen/mdOVgZw</a></p>