如何使用主体 onload 事件同时操作 HTML 音频标签和 JavaScript 函数？

Question

I hava a JavaScript code (for slideshow) below and also a HTML audio tag. I want my page to load every component of itself before playing the slideshow and also the audio file.

I have no problem with using window.onload to satisfy my need in order to run slideshow. but I don't know how to do it with my HTML tag .

I think I should write my JavaScript inside the body tag and use: body onload="...", but I don't know how!

Here is my JavaScript code :

<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>  

And this is my audio tag :

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

Answer 1

So it sounds like you can play the slideshow after the page is loaded, but you're not sure how to set the audio to play after the page load. Correct?

If so, instead of including the HTML audio element in markup, you can create the audio element dynamically in your script.

For example:

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

I also recommend checking if the clients browser supports HTML5 audio playback.

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

Source

Answer 2

If jQuery is an option, you can use

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

Or if it's not an option, you can create your own pseudo jQuery-like ready listener

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 )
}

Or, put the slideshow code in question at the very bottom of your DOM. It'll naturally be executed last.

Answer 3

Is this what you're after? It plays the song on load using .trigger and there's no bloated markup. http://jsfiddle.net/2xH29/