预加载多个音频文件

我的网页上有一个音频控件。我希望使用它根据页面的状态播放多个非常短的音频文件。我不希望在播放文件时加载文件。如何在页面加载时加载所有这些文件？预加载多个音频文件

这里的是我在做什么一个粗略的想法：

audio.src = ...; 
audio.load(); 
audio.play();

来源

2015-06-25 Baz

指定'preload =“auto”'，并显示您正在使用的代码... –

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){ 
 
    \t // all have loaded 
 
    \t 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() { 
 
    \t i++; 
 
     if (i >= audioFiles.length) { 
 
      // end 
 
      return; 
 
     } 
 
    \t 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>

来源

2015-07-10 22:18:07 Juank

这不适用于iPhone。任何想法为什么？ – Baz

由于安全性和带宽限制，移动设备仅限用户输入后才能播放音频。在这个例子中没有用户输入，但你可以通过按钮触发播放方法。还有其他方法可以更好地解释这个问题，请参阅http://stackoverflow.com/questions/7856502/play-a-sound-via-javascript-event-in-ios-5-html5-app。 – Juank

如果你想要更多的控制比<audio>元素为您提供可以使用网络音频。

使用XMLHttpRequest提前获取文件并将它们传递给decodeAudioData()。然后在内存中有AudioBuffer对象，您可以根据需要触发播放。

Here的几个短样本被预加载和回放无间隙（source）的演示。

（注：由于ridiculous Chrome bug上面演示，目前火狐，只有这纯粹是一个编解码器问题：对于网络音频浏览器支持 actually quite good在实际应用中，你应该给至少Vorbis和AAC的。最大兼容性。）

来源

2015-07-16 23:59:02 hexwab

我理解这个问题的方式如下：您想使用该函数预先加载音频文件。我认为这样做的最好方法是单独定义它们。如果您想嵌入您的音频剪辑成一个网页，这里有一个例子：

<audio src="audioclip.mp3" controls autoplay preload loop> 
    <p>This web browser does not support mp3 format</p> 
</audio>

控制：此元件状态天气或你不希望用户拥有播放暂停等控制在音频文件上。

自动播放：这个元素指明天气与否，您希望音频文件在网页加载后自动播放。如果你为你的项目选择这个选项，我也推荐使用preload元素（我将在后面解释），而不是使用controls元素（如果当然这是你想要的）。

预加载：这是您的问题特别寻找的元素。如果包含此元素，音频文件将在网页加载时预加载。

循环：这个元素，直到用户停止它（如果启用控件）

它说：“这个网页的浏览器不支持MP3格式的”部分只应在出现反复播放音频文件用户屏幕显示浏览器是否过时并且不支持MP3格式。

为了禁用某个元素，请不要将其包含在代码中。

希望这有助于！

UPDATE该元素应该足以满足您的要求。

来源

2015-07-17 06:27:29 airsickbachus3

您可以使用JSP页面，在该页面中可以访问存储在数据库中的音频文件并将其加载到带有用于音频文件的某个键和作为音频文件的值的地图中。只需调用音频文件即可完成播放。

来源

2015-07-17 18:52:32

如果你想在jsp中做... –

预加载多个音频文件

回答

相关问题