javascript - 预加载Javascript音频以在脚本中播放

Question

我有一个运行该脚本的简单程序:

function PlayAudio(Location){
var audio = new Audio(Location);
audio.Play()
}

在onclick HTML属性中。我有一张精美的加载图片，我知道该如何显示并成功完成了工作。我想在加载音频时显示此图片，然后在音频文件加载完毕并准备播放后使其消失。目前，点击元素和听到声音之间存在相当大的延迟。

我的麻烦是知道音频何时完成加载并可以播放。我认为最好知道何时完成加载的方法是预加载脚本文件。我不知道该怎么做。

这就是我的问题:
如何在脚本中预加载文件？
或者，是否有办法知道何时最终播放音频文件？

注意:我不能使用 <audio>元素，除非有某种方法可以将 <div>嵌套在 <audio>中，以便通过单击 <audio>内容中的任意位置来触发 <div>中的声音

对不起，我的描述有些混乱!

谢谢，
卢卡斯N

Answer 1

您可以使用 canplaythrough 事件

Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.

function PlayAudio (Location){
  var audio = new Audio;
  audio.oncanplaythrough = function(event) {
    // do stuff, e.g.; set loading `img` `style` `display` to `none`
    this.play();
  }
  audio.src = Location;
}