javascript - 为什么在播放音频文件之前不加载HTML链接

Question

我正在编码一个网站，该网站的页面顶部有一个导航栏，其中包含普通的通用HTML5链接元素(使用“a”元素):

<table id="menuButtonTable">
   <tr>
      <td>
         <a href="/home" class="menuButton">
            Home
         </a>
      </td>
      <td>
         <a href="/play" class="menuButton">
            Play
         </a>
      </td>
      <td>
         <a href="/help" class="menuButton">
            Help
         </a>
      </td>
      <td>
         <a href="/contacts" class="menuButton">
            Contacts
         </a>
      </td>
      <td>
      </td>
   </tr>
</table>

我也在JavaScript中加载多个音频文件:

const masterVolume = 0.4;
const breakingSound = new Audio("Sound-Effects/breaking.mp3");
breakingSound.volume = masterVolume;
const buildingSound = new Audio("Sound-Effects/building.mp3");
buildingSound.volume = masterVolume;
const choppingSound = new Audio("Sound-Effects/chopping.mp3");
choppingSound.volume = masterVolume;
const diggingSound = new Audio("Sound-Effects/digging.mp3");
diggingSound.volume = masterVolume;
const diggingSong = new Audio("Sound-Effects/digging-song.mp3");
diggingSong.volume = masterVolume;
const drinkingSound = new Audio("Sound-Effects/drinking.mp3");
drinkingSound.volume = masterVolume;
const eatingSound = new Audio("Sound-Effects/eating.mp3");
eatingSound.volume = masterVolume;
const footstepSound1 = new Audio("Sound-Effects/footstep-1.mp3");
footstepSound1.volume = masterVolume;
const footstepSound2 = new Audio("Sound-Effects/footstep-2.mp3");
footstepSound2.volume = masterVolume;
const jazzSong = new Audio("Sound-Effects/jazz-song.mp3");
jazzSong.volume = masterVolume;
const leavesSound = new Audio("Sound-Effects/leaves.mp3");
leavesSound.volume = masterVolume;
const themeSong = new Audio("Sound-Effects/oxygen-theme-song.mp3");
themeSong.volume = masterVolume;
const themeSong2 = new Audio("Sound-Effects/oxygen-theme-song-2.mp3");
themeSong2.volume = masterVolume;
const rainSong = new Audio("Sound-Effects/rain-song.mp3");
rainSong.volume = masterVolume;
const rainSound = new Audio("Sound-Effects/rain.mp3");
rainSound.volume = masterVolume;
const waterSound = new Audio("Sound-Effects/water.mp3");
waterSound.volume = masterVolume;
const windSound = new Audio("Sound-Effects/wind.mp3");
windSound.volume = masterVolume;

出于某种原因，每当我单击页面顶部的链接之一时，它们就永远不会加载，而我只剩下一个旋转的圆圈，表明页面正试图加载，位于左上方。但是，链接会在播放音频“windSound”之后加载。我完全不知道为什么会这样，有人知道如何解决这个奇怪的问题吗？
谢谢

包封了

Answer 1

我的理论是，正是这种设置src的方式导致了问题，当以常规方式将音频的src硬编码在页面上时，这种情况就不会发生。
我的问题是，考虑到上述页面结构，是否有更好的方法来动态设置音频播放器的源。