Javascript 如何在向用户显示内容之前以html格式预加载音频_Javascript_Html_Css

Javascript 如何在向用户显示内容之前以html格式预加载音频

javascript html css

Javascript 如何在向用户显示内容之前以html格式预加载音频,javascript,html,css,Javascript,Html,Css,我有一个充满css动画的页面，从一开始就有音乐对我来说很重要。我过去常称之为音乐。这是我的密码： <body> <audio autoplay> <source src="./1.mp3" type="audio/mpeg"> <source src="./1.ogg" type="audio/ogg"> <embed height="50" width="100" src="./1.mp3"> </audio> <

我有一个充满css动画的页面，从一开始就有音乐对我来说很重要。我过去常称之为音乐。这是我的密码：

<body>
<audio  autoplay>
<source src="./1.mp3" type="audio/mpeg">
<source src="./1.ogg" type="audio/ogg">
<embed height="50" width="100" src="./1.mp3">
</audio>
</body


创建JS预加载程序并仅在所有内容就绪后显示页面
最简单的方法是在页面顶部创建一个预加载div，并在加载音乐后将其隐藏。或者，你不仅可以等待音乐，还可以等待所有的内容，如你所愿
#preloadingDiv {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  z-index: 100;
}

$("#preloaderDiv").css("height", window.innerHeight + "px");

$("#music").load(function() {
  $("#preloadingDiv").css("display", "none");
  $("#musicPlayer").get(0).play();
});

在网站上喜欢音乐的人举手……根本没有人……请不要这样做。如果你的网页有自动播放的音乐，很多人会直接关闭它。我知道！实际上，它就像一张有特定观众（1人！）的动画邮政卡。放松点！没有害处；）