2013-11-27 41 views
0

我有一個javascript代碼(用於幻燈片),也是一個html音頻標籤。 我希望我的頁面在播放幻燈片和音頻文件之前加載其自身的每個組件。如何使用body onload事件操作html音頻標籤和javascript函數?

我沒有問題,用的window.onload滿足才能運行幻燈片我的需要。 但我不知道如何用我的html標籤來做到這一點。

我覺得我應該寫我的身體標記和使用的JavaScript裏面:身體的onload =「...」。但我不知道如何!

這裏是我的javascript代碼:

<script type="text/javascript"> 

window.onload = a; 

function a() { 

     $(document).ready(function(){ 
     $('#slideshow').cycle({ 

x:'curtainX', 
sync: false, 
speed:900, 
timeout:10, 
delay: 1500, 
}); 
}); 

setTimeout(plus1,9000); 
function plus1() { 

     $(document).ready(function(){ 
     $('#slideshow').cycle('pause'); 
}); 
} 

} 

</script> 

,這是我的音樂標籤:

<audio autoplay loop> 
    <source src="kooche.mp3"> 

感謝你的幫助

+0

然後使用JavaScript,而不是使用自動播放 –

回答

1

所以,它聽起來就像後就可以播放幻燈片該頁面已加載,但您不確定如何設置音頻在頁面加載後播放。正確?

如果是這樣,而不是包括標記的HTML音頻元素,您可以動態地在你的腳本來創建audio element

例如:

$(document).ready(function(){ 
    $('#slideshow').cycle('pause'); 
    // Create the audio element 
    var music = new Audio("kooche.mp3"); 
    music.play(); 
}); 

我也建議檢查如果客戶端瀏覽器支持HTML5的音頻播放。

var audioEl = document.createElement('audio'); 
// Check this before you try playing your audio 
var canPlayAudio = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, '')); 

Source

+0

謝謝很多播放音頻。我檢查它。有用 。 但我有其他問題 當幻燈片不活動或加載時,我相信你已經熟悉幻燈片 ,圖像將顯示,因爲他們在身體標記 我怎麼能控制他們,以解決問題完全? 再次,謝謝你以前的幫助 – Nima

+0

我不知道我完全按照。那麼幻燈片放映的圖像會在頁面加載完成之前顯示出來?我認爲您可能需要使用.load()而不是.ready(),因爲.ready()會在DOM準備就緒時觸發。但資產(圖像,聲音文件)可能未準備好。看看這篇文章:http://stackoverflow.com/questions/5424055/check-if-images-are-loaded – linstantnoodles

0

如果jQuery是一個選項,你可以使用

$(document).ready(function(){ 
    //my slideshow code 
}); 

或者,如果它不是一個選項,您可以創建自己的僞的jQuery樣準備監聽

function onReady (callback){ 
    var addListener = document.addEventListener || document.attachEvent, 
     removeListener = document.removeEventListener || document.detachEvent 
     eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange" 

    addListener.call(document, eventName, function(){ 
     removeListener(eventName, arguments.callee, false) 
     callback() 
    }, false) 
} 

或者,把幻燈片代碼中的問題,在你的DOM的最底部。它最終自然會被執行。