Stop 300ms onclick delay on Android web browser

Question

I have a page that plays an mp3 file when button pressed, using javascript like:

onclick="playAudio"

There is the obvious 300ms delay. I want to use this through html5 browsers only, using the nexus 7 only. So I dont want any backup code for IE6 etc. Every solution I've seen seems quite complicated and I can't get it to work.

Is there no simple javascript solution?

Answer 1

Check out the Fastclick project on github. If I understand your question, you just want to get rid of the 300ms delay on touch devices. This project is a polyfill to make touch uis much more snappy and responsive. Here is the url:

https://github.com/ftlabs/fastclick

Use Case:

Just include the fastclick library like so:

<script type='application/javascript' src='/path/to/fastclick.js'></script>

And then just instantiate it by putting following in your main app js file:

window.addEventListener('load', function() {
     new FastClick(document.body);
}, false);

Hope that helps!

Answer 2

As I understand your question, this problem is related to playing audio and not necessarily related to interaction with buttons. So, on the basis of that I will try to answer your question in the following.

I assume you are using the HTML5 audio API for this. Have you taken a look at the preload attribute? It has a value called auto which tells the browser that it might be a good idea to preload the audio. The drawback of this is that you risk to cause unnecessary overhead to the server since you are almost always downloading the audio no matter what. Using this approach you can, through JavaScript, subscribe to an canplaythrough event, telling you when the audio has been downloaded and is ready to be played.

More details on this subject can be found here:

• http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx
• https://developer.mozilla.org/en-US/docs/HTML/Element/audio