title: Why are HTML links not loading until audio file has been played
body: <p>I am coding a website that has a navigation bar at the top of the page, containing normal, generic HTML5 link elements (using the &quot;a&quot; element):</p>
  <pre><code>&lt;table id=&quot;menuButtonTable&quot;&gt;
     &lt;tr&gt;
        &lt;td&gt;
           &lt;a href=&quot;/home&quot; class=&quot;menuButton&quot;&gt;
              Home
           &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;a href=&quot;/play&quot; class=&quot;menuButton&quot;&gt;
              Play
           &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;a href=&quot;/help&quot; class=&quot;menuButton&quot;&gt;
              Help
           &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
           &lt;a href=&quot;/contacts&quot; class=&quot;menuButton&quot;&gt;
              Contacts
           &lt;/a&gt;
        &lt;/td&gt;
        &lt;td&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I also am loading multiple audio files in javascript:</p>
  <pre><code>const masterVolume = 0.4;
  const breakingSound = new Audio(&quot;Sound-Effects/breaking.mp3&quot;);
  breakingSound.volume = masterVolume;
  const buildingSound = new Audio(&quot;Sound-Effects/building.mp3&quot;);
  buildingSound.volume = masterVolume;
  const choppingSound = new Audio(&quot;Sound-Effects/chopping.mp3&quot;);
  choppingSound.volume = masterVolume;
  const diggingSound = new Audio(&quot;Sound-Effects/digging.mp3&quot;);
  diggingSound.volume = masterVolume;
  const diggingSong = new Audio(&quot;Sound-Effects/digging-song.mp3&quot;);
  diggingSong.volume = masterVolume;
  const drinkingSound = new Audio(&quot;Sound-Effects/drinking.mp3&quot;);
  drinkingSound.volume = masterVolume;
  const eatingSound = new Audio(&quot;Sound-Effects/eating.mp3&quot;);
  eatingSound.volume = masterVolume;
  const footstepSound1 = new Audio(&quot;Sound-Effects/footstep-1.mp3&quot;);
  footstepSound1.volume = masterVolume;
  const footstepSound2 = new Audio(&quot;Sound-Effects/footstep-2.mp3&quot;);
  footstepSound2.volume = masterVolume;
  const jazzSong = new Audio(&quot;Sound-Effects/jazz-song.mp3&quot;);
  jazzSong.volume = masterVolume;
  const leavesSound = new Audio(&quot;Sound-Effects/leaves.mp3&quot;);
  leavesSound.volume = masterVolume;
  const themeSong = new Audio(&quot;Sound-Effects/oxygen-theme-song.mp3&quot;);
  themeSong.volume = masterVolume;
  const themeSong2 = new Audio(&quot;Sound-Effects/oxygen-theme-song-2.mp3&quot;);
  themeSong2.volume = masterVolume;
  const rainSong = new Audio(&quot;Sound-Effects/rain-song.mp3&quot;);
  rainSong.volume = masterVolume;
  const rainSound = new Audio(&quot;Sound-Effects/rain.mp3&quot;);
  rainSound.volume = masterVolume;
  const waterSound = new Audio(&quot;Sound-Effects/water.mp3&quot;);
  waterSound.volume = masterVolume;
  const windSound = new Audio(&quot;Sound-Effects/wind.mp3&quot;);
  windSound.volume = masterVolume;
  </code></pre>
  <p>For some reason, whenever I click on one of the links at the top of the page, they never load and I am just left with the swirling circle, showing that the page is trying to load, at the top left. However, the links do load after the audio 'windSound' has been played. I have absolutely no clue why this is happening, does anyone know how to fix this strange problem?</p>
  <p>Thanks</p>
  <ul>
  <li>primecubed</li>
  </ul>