Audio Controls and Syncing in HTML5

I have a course that has audio which is synced with animation (images fading in and out). What should happen is this...

On screen load, the user should click the play button on the audio controls and then the audio clip will play. Then as the audio plays images should be synced with parts of the audio. Also, we're using the audio control bar that shows you how far along you are in your audio clip (like a progress bar) and there is also a replay button.

All of this I just described works perfectly on the desktop version but when you view it on your iPad in html5 nothing really works.

Here is what happens on the iPad (html5):

The audio clip auto plays vs. having to click the play button. The syncing of the images with audio doesn't work. The audio progress bar doesn't work (it is static and nothing moves).

The play button is in the play state and not pause.

Is there anyway to get ALL of this to work perfectly on the iPad in html5?????

We need a solution and fast! Please reply with exact steps on how to fix all of this.

Thanks!

Jason