Trigger click function after page load

Question

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
  $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...
  $('#play').on('click',function(){
    $("#Audio1")[0].play();
})
});
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <audio id="Audio1" controls="controls" 
src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
 HTML5 Audio is required for this example. 

<input type="button" id="play" value="play" />
 
  
</body>
</html>

I want to trigger a click event on the "Play" button to play the music.

I need to do like this way as 'Autoplay' doesn't work on mobile devices.

Due to data concern, it is blocked by default.

I found this article, http://makandracards.com/makandra/13893-autoplay-html5-audio-in-chrome-for-android-mobile-safari-in-ios and turned out he is right as if I hit this play button on my phone, music is playing as expected.

I want to trigger this button to be clicked after the page gets loaded. It is not working but if I run the same bit of js IN CONSOLE it is working.

Edit 1

Per suggestion given in comment I have tried this but still no luck.

$(document).ready(function() {
  $('#play').on('click', function() {
    $("#Audio1")[0].play();
  })
  $('#play')[0].click(); //initial click on 'play' button to play music which doesn't seem to be working...
});

By initial click you means it doesn't work first time or it doesn't work at all? Try calling $("#Audio1")[0].play() on first line. No need to trigger the event before it's even bind to element. Also there's no need for indexing [0] as searching by Id always return first element. — Diljohn5741, Feb 14 '16 at 12:22
`$('#play')[0].click()` should be after ` $('#play').on('click',function()`. Also if you are having id, why is `$('#play')[0].click()`. Should it not be `$('#play').click()`. Its a bad practice having multiple elements with same id — Rajesh, Feb 14 '16 at 12:25
@Diljohn5741 by calling $("#Audio1")[0].play() would defenitely work on desktop browsers, but i need it to be working on mobile browsers as well and that's why i need to simulate a click event on that button, i hope this make sense, thanks — Geoffreyirl, Feb 14 '16 at 12:26
@Geoffreyirl I have reverted your last edit. Never change original question. If you think someone's advice has added something, add it at the bottom. — Rajesh, Feb 14 '16 at 12:56
Simple answer is you cannot on mobile browser play a video without any user interaction — A. Wolff, Feb 14 '16 at 13:11

score 0 · Answer 1 · edited Feb 21 '16 at 08:33

You need to register your on click event before the click action:

<script type="text/javascript">
    $(document).ready(function() {
        $('#play').on('click',function(){
            $("#Audio1")[0].play();
        });
        $('#play')[0].click();//initial click on 'play' button to play music which doesn't seem to be working...

    });
</script>

EDIT

The problem isn't because of your on click action. Click events work as expected, but Apple had specifically disabled autoplay until the user initiates it via user actions (user taps the play button) as outlined in the article:

Safari HTML5 Audio and Video Guide

If you do an output of your <audio> element you'll see that the paused property of your <audio> is automatically set to 'true' upon rendering.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#play').on('click',function(event){
            $("#Audio1")[0].play();

            var myplay = document.getElementById('Audio1');
            var log = document.getElementById('screenlog');
            for (var prop in myplay) {
                log.innerHTML += prop + ":" + myplay[prop] + "<br>";
            }
        });
        $('#play')[0].click();

        });
    </script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
</head>
<body>
<audio id="Audio1" controls="controls"
       src="http://themes.rascals.eu/eprom/dark/wp-content/uploads/2012/11/Madoff-Bomp.mp3" type="audio/mp3" >
</audio>
HTML5 Audio is required for this example.
<div id="screenlog"></div>
<input type="button" id="play" value="play" />


</body>
</html>

thanks for the reply, i did it still its only working on desktop browsers not mobile devices, i've got link geoffreydev.com/testing.html if i open using any browser on my phone its not working... — Geoffreyirl, Feb 14 '16 at 12:34

Trigger click function after page load

Edit 1

1 Answers1