How to operate both HTML audio tag and a JavaScript function with body onload event?

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

Then play your audio using javascript instead of using autoplay — Thanh Trung, Nov 27 '13 at 22:12

linstantnoodles · Accepted Answer · 2013-11-28T21:29:43.957

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

edited Nov 28 '13 at 21:29

answered Nov 27 '13 at 22:15

linstantnoodles

4,350
1
22
24

thank you a lot . I checkei it . it works . but I hava an other problem I'm sure you are familiar with slideshow when slideshow is not active or loaded , the images will be shown because they are in body tag how can I control them them too , to solve the problem completely ? again , thank you for your former help – Nima Nov 28 '13 at 19:11
I'm not sure I follow completely. So the images for the slideshow are being displayed before the page is done loading? I think you may need to use .load() rather than .ready() because .ready() fires as soon as the DOM is ready, but the assets (images, sound files) may not be ready. Check out this post: http://stackoverflow.com/questions/5424055/check-if-images-are-loaded – linstantnoodles Nov 28 '13 at 21:19

score 0 · Answer 2 · answered Nov 27 '13 at 22:15

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.

score 0 · Answer 3 · answered Nov 27 '13 at 22:20

0

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

answered Nov 27 '13 at 22:20

leaksterrr

3,800
7
34
65

thank you , it is what I need . to control a audio tag out of html – Nima Nov 28 '13 at 19:13

How to operate both HTML audio tag and a JavaScript function with body onload event?

3 Answers3