預加載多個音頻文件

我的網頁上有一個音頻控件。我希望使用它根據頁面的狀態播放多個非常短的音頻文件。我不希望在播放文件時加載文件。如何在頁面加載時加載所有這些文件？預加載多個音頻文件

這裏的是我在做什麼一個粗略的想法：

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中做... –

預加載多個音頻文件

回答

相關問題