HTML5 Audio "trigger" not working on iPad
I have an HTML5 audio player that needs to play when an element has been clicked. It works great in all desktop browsers. It just doesn't work on iPad.
I read that ios does not support autoplay and that the user has to initiate the game ... which as far as I know is exactly what I am doing, having the code in the click function?
var item = $('.type-aud'),
path = item.attr('file'),
html = '<audio controls><source src="'+path+'" type="audio/mpeg" class="audio"></audio><span class="play"></span>',
playerClass = item.find('.audio');
if (!playerClass.hasClass('audio')) {
item.append(html);
}
item.click(function() {
var player = item.find('audio');
if (!player.hasClass('playing')) {
$(player).addClass('playing').trigger("play").next().addClass('pause').removeClass('play');
} else {
$(player).removeClass('playing').trigger("pause").next().removeClass('pause').addClass('play');
}
});
I have included controls for debugging, and if I click "Play" on my own control, it starts working ...
thank
source to share
I was working on something similar recently and found that you cannot play sound using an event trigger
.
eg. I have tried
$('#btn').click(function(){
myAudioControl.play();
});
$('#btn').trigger('click');
This code will never work on iOS5 as it requires you to physically click the item.
There is a good solution here Play sound via javascript event in i5 5 HTML5 application that I worked with to find a solution to the problem.
Basically my sound was soundless mp3 file when user clicked a button and then updated audio src
. Then I could play the audio file dynamically through any trigger or event.
source to share