css - 在 HTML5 中预加载音频需要时间

Question

当你在我的 website 上执行 Konami 代码时(Up, Up, Down, Down, Left, Right, Left, Right, b, a) Star Wars Crawl 屏幕出现。

一切正常，但音乐与(极其重要的) Logo 外观不同步。以下是我加载音频文件的方式:

<audio preload="auto" autoplay>
  <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.ogg" type="audio/ogg" />
  <source src="https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg" />
</audio>

下面是我如何计时我的 Logo 外观(在介绍短语之后):

.logo
   animation: logo 9s ease-out 9s

(然后用关键帧缩放)

音频需要一小段时间来加载，这会破坏整个事情，我该如何解决这个问题？如果音频文件是本地的会有帮助吗？

Answer 1

我似乎找到了答案，在本地播放音乐可以非常高效地加载。

<audio preload="auto" autoplay>
  <source src="./../../assets/audio/Star_Wars_original_opening_crawl_1977.mp3" type="audio/mpeg">
</audio>