我的网页上有一个音频控件。我希望用它来播放多个非常短的音频文件,具体取决于页面的状态。我不想在播放文件时加载文件。如何在页面加载时加载所有这些文件?
这是我正在做的一个粗略的想法:
http://jsfiddle.net/L0c9ccx9/20/
audio.src = ...; audio.load(); audio.play();
解决方法
var audioFiles = [ "http://www.teanglann.ie/CanC/nua.mp3","http://www.teanglann.ie/CanC/ag.mp3","http://www.teanglann.ie/CanC/dul.mp3","http://www.teanglann.ie/CanC/freisin.mp3" ]; function preloadAudio(url) { var audio = new Audio(); // once this file loads,it will call loadedAudio() // the file will be kept by the browser as cache audio.addEventListener('canplaythrough',loadedAudio,false); audio.src = url; } var loaded = 0; function loadedAudio() { // this will be called every time an audio file is loaded // we keep track of the loaded files vs the requested files loaded++; if (loaded == audioFiles.length){ // all have loaded init(); } } var player = document.getElementById('player'); function play(index) { player.src = audioFiles[index]; player.play(); } function init() { // do your stuff here,audio has been loaded // for example,play all files one after the other var i = 0; // once the player ends,play the next one player.onended = function() { i++; if (i >= audioFiles.length) { // end return; } play(i); }; // play the first file play(i); } // we start preloading all the audio files for (var i in audioFiles) { preloadAudio(audioFiles[i]); }
<audio id="player"></audio>