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...
});
1 answers
solution1
0 2016-02-14 12:30:04
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.