Javascript Alert showing before Background Image

Question

I'm working on a page that loads with an alert and an mp3 autoplay. In Firefox the alert shows up with the Background Image and sound, but in Chrome the alert loads on an empty sites and without the sound, and shows the Background Image only after clicking OK.

CSS

body{padding:0;margin:0;font-family:arial,sans-serif;background:url(images/bgg.png)

HTML

<body >
....
....
<audio controls autoplay>
<source src="marimbaiph.mp3" type="audio/mpeg">
</audio></center><br> 
<script type="text/javascript">
alert('Hello \nPlease Click "OK" to continue. ');
</script>

Is there a way to make the alert pop after showing the Background Image and playing the sound also in Chrome?

Thanks

Ugh. I generally find it very annoying when web pages start playing music automatically. Now you're asking people to help you put up a modal dialog that people will have to get rid of before they can make the music stop. My advice would be to stop whatever you're doing and think a bit harder about your user interface. — r3mainer, Apr 04 '15 at 08:28

score 0 · Answer 1 · answered Apr 04 '15 at 08:25

0

insert your actions on $(document).ready

  $(document).ready(function(){
    alert('Hello \nPlease Click "OK" to continue. ');
  });

answered Apr 04 '15 at 08:25

Dyrandz Famador

4,303
5
18
38

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

What you are looking for is to check if the document is ready before starting the script.

If you don't want to use jQuery check this : $(document).ready equivalent without jQuery

If you are using jQuery:

 $(document).ready(function(){
 //do stuff
 })

waits until the DOM has loaded and can be traversed (the rest of the content may or may not be loaded by that point).

edited May 23 '17 at 12:28

Community

1
1

answered Apr 04 '15 at 08:27

Joel Almeida

7,399
3
22
50

score 0 · Answer 3 · answered Apr 04 '15 at 08:41

<script>
    alert("click ok to continue");
    var x = document.getElementsByTagName("BODY").  [0];
    x.style.stylestogive;
    var y = document.getElementsByTagName("audio")[0];
    y.play();
</script>


<body >
 <audio controls>
 <source src="marimbaiph.mp3" type="audio/mpeg">
  </audio></center><br>

Javascript Alert showing before Background Image

3 Answers3