iPhone, JQTouch and HTML5 audio tags

Question

I am having an issue with JQTouch (latest beta) and html5 audio tags on 'sub pages' - the audio tag works before any page transitions are done, and cease to work afterward.

For example:

http://richardprice.dyndns.ws/test.html

and

http://richardprice.dyndns.ws/test2.html

are identical other than I swap the "current" class between the two divs - all the audio tags play the same mp3.

On test.html the audio tag on the initial page works, but when you switch to Page 2 the audio tag on that page does not (and sometimes results in a browser crash). Switch back to Page 1 and the audio tag on that page has ceased to work.

test2.html is the same test but with the initial pages reversed, and the same thing happens - Page 2 (now the initial page) plays the audio, Page 1 does not, and switching back to Page 2 results in the audio no longer working.

Thoughts?

Answer 1

Perhaps it's because the audio tag on page 2 doesn't have layout (since its display is none). I've seen this behavior before, see comments here.

You might try adding the audio via DOM (document.createElement('audio') ...) on that page's pageAnimationEnd event.

Answer 2

I encountered the same problem with r148 of JQTouch. I had HTML5 audio embedded on three separate subpages of my site. The first time I loaded each page, the audio played fine (in QuickTime, iPhone 3.1). When I went back to those pages in the same session, the iPhone link to the audio had a line through the play triangle. Often the browser crashed to the home screen.

Annoyingly, the audio player in the iPad works perfectly on these JQTouch pages. Back and forth, loading and reloading.

The crashing iPhone player worried me, so I had to revert to a boring old a href link. We are too close to launch date to try any JavaScript workarounds.