如何使用主体 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/