时间戳

首页 > 解决方案 > 为什么在播放音频文件之前不加载 HTML 链接

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

问题描述

我正在编写一个在页面顶部有一个导航栏的网站，其中包含普通的通用 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”后，链接会加载。我完全不知道为什么会这样，有人知道如何解决这个奇怪的问题吗？

谢谢

标签： javascripthtmlaudiohyperlink

解决方案

我的理论是，正是这种设置 src 的方式导致了问题，当音频的 src 以传统方式在页面上硬编码时，不会发生这种情况。

我的问题是，考虑到所描述的页面结构，是否有更好的方法来动态设置音频播放器的源。

推荐阅读