如何使用主體 onload 事件同時操作 HTML 音頻標簽和 JavaScript 函數？

Question

我在下面有一個 JavaScript 代碼（用於幻燈片）和一個 HTML 音頻標簽。 我希望我的頁面在播放幻燈片和音頻文件之前加載自身的每個組件。

我使用 window.onload 來滿足我運行幻燈片的需要沒有問題。 但我不知道如何處理我的 HTML 標簽。

我想我應該在 body 標簽中編寫我的 JavaScript 並使用：body 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">

Answer 1

所以聽起來您可以在頁面加載后播放幻燈片，但您不確定如何設置頁面加載后播放的音頻。 正確嗎？

如果是這樣，您可以在腳本中動態創建音頻元素，而不是在標記中包含 HTML 音頻元素。

例如：

$(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/, ''));

來源

Answer 2

如果 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 的最底部。 它自然會最后執行。

Answer 3

這是你追求的嗎？ 它使用.trigger在加載時播放歌曲，並且沒有臃腫的標記。 http://jsfiddle.net/2xH29/