如何使用body onload事件操作html音频标签和javascript函数？


How to operate both of a html audio tag and a javascript function with body onload event?

我在下面有一个javascript代码(用于幻灯片)和一个HTML音频标记。我希望我的页面在播放幻灯片和音频文件之前加载它本身的每个组件。

我可以使用window.onload来满足运行幻灯片的需要。但我不知道如何使用HTML标记。

我认为我应该在body标记中编写我的javascript并使用：body onload=…"。但我不知道怎么做！

这是我的javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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');
});
}

}

这是我的音频标签：

1
  <source src="kooche.mp3">

谢谢你的帮助

相关讨论

因此，听起来您可以在页面加载后播放幻灯片，但您不确定如何设置音频在页面加载后播放。对的？

如果是这样，您可以在脚本中动态创建音频元素，而不是在标记中包含HTML音频元素。

例如：

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

我还建议检查客户端浏览器是否支持HTML5音频播放。

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

来源

相关讨论

这就是你想要的吗？它使用.trigger在加载时播放歌曲，并且没有膨胀的标记。http://jsfiddle.net/2xh29/

相关讨论

如果jquery是一个选项，则可以使用

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

或者，如果它不是一个选项，您可以创建自己的伪jquery，比如ready listener。

1
2
3
4
5
6
7
8
9
10
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的最底部放置有问题的幻灯片代码。当然会在最后执行。