1

I'm trying to implement a button press sound using HTML5 <audio> element and a javascript trigger. I am getting bit of a delay between when the button is pressed and when the sound plays. The sound is meant to be user feedback for a successful press so any delay is unacceptable.

The implementation works fine on all windows devices, but there is a varying amount of delay on any android device I've tested on.

HTML:

<audio id="button_click" preload="auto">
    <source src="audio/button.mp3" type="audio/ogg">
</audio>

JS:

$scope.buttonClick = function(){
   var audio = document.getElementById('button_click');
   audio.load();
   audio.play();
};

The extra audio.load(); line is a workaround for the problem of HTML5 audio elements only playing once on Android devices.

Any thoughts on a workaround? If there is no workaround, any thoughts on how to implement an audible feedback for button clicks in a browser based single page app?

Dejan Skledar
  • 11,280
  • 7
  • 44
  • 70
Adam Hickey
  • 21
  • 5
  • Which browser you were using? What's the android version? – Sabbir Apr 23 '15 at 20:11
  • How much of a delay? Android has a persistent issue with audio latency. There are other questions with deal with this same issue: http://stackoverflow.com/questions/14842803/low-latency-audio-playback-on-android – Kyle Falconer Apr 23 '15 at 20:14
  • @ Sabbir Using Android Chrome running on JellyBean 4.3. Also tested on KitKat but not yet on Lolipop. – Adam Hickey Apr 23 '15 at 20:27
  • @Kyle The delay is around a second but as this is a feedback for a user interaction that's a long time. If I was playing a song....no big deal. Thanks for the link. Reading now. – Adam Hickey Apr 23 '15 at 20:28
  • The preload attribute is boolean on mobile and loads only meta information and endbyte for length. Try caching the audio via a link tag in the head, then call the click. – Radio Apr 23 '15 at 21:18

0 Answers0