HTML5 Audio 'trigger play' not working on iPad

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

Does calling video API method directly works? player[0].play()? Maybe trigger path is considered by ipad "too long" to be direct user interaction? — dfsq
That kind of works...I have to tap the element that has the click event about 8 times before it actually plays though...Can't be a buffering issue surely as the file is tiny. — tctc91

Tim B James Tim B James · Accepted Answer · 2013-01-30T15:23:16

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.

HTML5 Audio 'trigger play' not working on iPad

1 Answers