javascript - 如何将音频文件保存在浏览器的缓存中，以便当用户按下按钮时，音频会立即从缓存中开始播放？

Question

我有一组简短的音频文件，我想在用户按下相应按钮时播放一个音频文件。我有这个脚本来播放声音:

<script type="text/javascript">
    var sound = new Audio();
    function playSound(audioUrl) {
        sound.src = audioUrl;
        sound.play();
    }
</script>

<button type="button" onclick="playSound('http://example.com/audioA.mp3')">Audio A</button>
<button type="button" onclick="playSound('http://example.com/audioB.mp3')">Audio B</button>
<button type="button" onclick="playSound('http://example.com/audioC.mp3')">Audio C</button>
...

问题是，这些音频文件并不大，但在第一次按下按钮时仍然需要短暂的延迟才能下载和播放，这有点烦人。如何命令浏览器在页面加载时缓存所有音频文件？当我搜索这个时，我发现了缓冲和流式音频，这可能不适合我的需要，因为我的音频长度不是那么长。谢谢。

Answer 1

您可以预加载它们，然后在预加载完成后立即提供链接。您可以同步或异步执行此操作。我建议异步执行。

看这个例子:

var sound = new Audio();
function playSound(audioUrl) {
  sound.src = audioUrl.getAttribute('data-url'); //grab the data-url
  sound.play();
}

function preloadAudio()
{
  var audioButtons = document.querySelectorAll("button[data-type='audio']") //select all button elements with data-type = audio
  for (var i = 0; i < audioButtons.length; i++)
  {
    //loop all audio elements
    audioButtons[i].setAttribute("disabled", true); //disable the element
    var preloader = new Audio();
    preloader.addEventListener("loadeddata", enableAudioButton.bind(audioButtons[i]), true); // use bind to link the audio button to the function
    preloader.src = audioButtons[i].getAttribute("data-url"); //trigger the download
  }
}

function enableAudioButton()
{
  this.removeAttribute("disabled");  //reenable the button
}

document.body.addEventListener("load", preloadAudio, true);

<button type="button" data-type="audio" data-url="http://example.com/audioA.mp3" onclick="playSound(this)">Audio A</button>
<button type="button" data-type="audio" data-url="http://example.com/audioB.mp3" onclick="playSound(this)">Audio B</button>
<button type="button" data-type="audio" data-url="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3" onclick="playSound(this)">Audio C</button>

我使用了一个真实的例子(音频 C)，所以你可以看到脚本的功能。