Question

I have an HTML5 audio player that should play when an element has been clicked. It works fine in all desktop browsers. It’s just not working on the iPad.

I’ve read that ios doesn’t support auto play and that a user must initiate the play…which as far as I’m aware is exactly what I’m doing by having my code within a 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’ve enabled the controls for debugging, and if I press ‘Play’ on the native controls, It then starts working…

Thanks

Answer 1

I was working on something similar recently and found that you are unable to get the audio to play using a trigger event.

e.g. I was trying

$('#btn').click(function(){
    myAudioControl.play();
});

$('#btn').trigger('click');

This code will never work on iOS5 as it requires a physical click of an element.

There is a good solution here Play a sound via javascript event in iOS 5 HTML5 app Which I worked with to find a solution to the problem.

I basically had the audio play a silent mp3 file when the user clicked a button, then updated the audio src. Then I could dynamically play the audio file through any trigger or event.