iOS html5 audio autoplay after ajax request
HTML
<div id="initbutton" class="button">Initialize Audio</div>
<div id="ajaxstart" class="button">Start AJAX loop</div>
<div id="console" class="button"></div>
CSS
.button{
padding: 10px;
border:2px solid blue;
margin: 10px;
cursor:pointer;
}
#console{
height: 300px;
overflow:scroll;
font-size: 90%;
white-space: nowrap;
}
JavaScript
var con = $('#console');
var sound;
$('#initbutton').one('click',function(ev){
log("<b>start audio load</b>");
sound = new Audio("http://localhost/origami/sound/notification/new_incident.mp3");
sound.addEventListener('canplaythrough',function(ev){
log('<b>audio loaded</b>');
});
sound.addEventListener('ended',function(ev){
log('<b>audio played</b>');
});
sound.load();
sound.volume=1;
});
function ajax(){
log("ajax start");
$.post('/echo/json/',{a:123435},function(data,status,jqxhr){
if(sound){
sound.play();
}
log('ajax returned');
});
};
function getTime(){
return new Date().toTimeString().substr(0,8);
};
function log(msg){
con.prepend(getTime() + ': ' + msg + '<br>');
};
$('#ajaxstart').one('click',function(ev){
log('loop started');
setInterval(ajax,4000);
});
$('#initbutton').trigger('click');
$('#ajaxstart').trigger('click');