Question

如果用户按下播放按钮，我想向他显示一条消息，以便他知道歌曲正在加载（因为浏览器本身没有加载指示器）。

我没有使用preload="auto"或"metadata"，因为服务器流量过多，而且并非所有用户都将收听这些音频。

音频开始播放大约需要5秒钟（似乎必须下载至少1或2 Mb的音频才能真正开始播放），所以我希望在加载音频时显示此消息（或正在加载元数据），或者至少在用户单击播放按钮然后将其隐藏之后，将其显示5秒钟。

我该怎么做？

Answer 1

AudioElement触发事件 loadstart ，只需使用它即可：

myAudio.addEventListener("loadstart", function () {
  console.log(‘start loading ...’)
},false);

Answer 2

function message()
{
   $('#msg').css({
      "display":"block"
   })
   setTimeout(hide, 5000);
}
function hide()
{
   $('#msg').css({
      "display":"none"
   })
}

.msg{
   display:none
}

<body>

 <audio controls  onclick="message()">
 <source src="horse.ogg" type="audio/ogg">
 <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
  </audio>
   <label id ="msg" class = "msg">Loading Please wait..</label>


</body>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

用户单击音频标签中的播放按钮时如何显示消息？

2 个答案: