I am making a web app, and i needed to add a short sound when a button is being clicked.

the file is in mp3 format and around 24kb in size, i didnt want to use javascript to create the element so i added it to the DOM and used CSS to hide it, also i added preload="auto" so it gets loaded with the DOM

<audio id="click" preload style="display:none;"> 
   <source src="sound/click.mp3" type="audio/mp3">
</audio>

in the javascript, i have something like:

var clickSound = $('#click')[0];

then in a function that listens to an even click on a button i have:

function(){
  clickSound.play();
}

this works fine on my puter (firefox, chrome), but on mobile after clicking the trigger button, it will wait for like 3 seconds before it plays for the first time, and will now play instantly after the first delayed play.

Update:

i noticed even if i navigate to the mp3 file on my mobile like this .mp3 and click on play, it still delays, seems like it had to buffer.

anyway around this problem?

Complete Example:

Here is a jsFiddle for mobile testing.

var clickSound = document.getElementById('click');
var play = document.getElementById('play');

play.addEventListener('click', function() {
      clickSound.play();
}, false);

<audio id="click" preload>
  <source src=".mp3" type="audio/mp3">
</audio>


<input id="play" type="button" value="play sound">

I am making a web app, and i needed to add a short sound when a button is being clicked.

the file is in mp3 format and around 24kb in size, i didnt want to use javascript to create the element so i added it to the DOM and used CSS to hide it, also i added preload="auto" so it gets loaded with the DOM

<audio id="click" preload style="display:none;"> 
   <source src="sound/click.mp3" type="audio/mp3">
</audio>

in the javascript, i have something like:

var clickSound = $('#click')[0];

then in a function that listens to an even click on a button i have:

function(){
  clickSound.play();
}

this works fine on my puter (firefox, chrome), but on mobile after clicking the trigger button, it will wait for like 3 seconds before it plays for the first time, and will now play instantly after the first delayed play.

Update:

i noticed even if i navigate to the mp3 file on my mobile like this http://example./sound/click.mp3 and click on play, it still delays, seems like it had to buffer.

anyway around this problem?

Complete Example:

Here is a jsFiddle for mobile testing.

var clickSound = document.getElementById('click');
var play = document.getElementById('play');

play.addEventListener('click', function() {
      clickSound.play();
}, false);

<audio id="click" preload>
  <source src="http://scriveit./sound/click.mp3" type="audio/mp3">
</audio>


<input id="play" type="button" value="play sound">

• javascript
• jquery
• html
• android-mediaplayer
• media

Share Improve this question Follow edited Dec 2, 2014 at 6:27 misterManSam 24.7k1111 gold badges7171 silver badges9191 bronze badges asked Dec 2, 2014 at 5:58 user2666633user2666633 34055 silver badges2222 bronze badges 4

• 1 This is interesting. It would make things easier if you included a plete example including the mp3 that can just be run by us without having to find a suitable mp3 to re-create this ourselves. – misterManSam Commented Dec 2, 2014 at 6:05
• @misterManSam i am not allowed to add external links – user2666633 Commented Dec 2, 2014 at 6:09
• Thanks but same delay on mobile devices, works fine on PC – user2666633 Commented Dec 2, 2014 at 6:28
• It wasn't meant to fix the problem! Just adding it for testing purposes :) The fiddle recreates the problem. For me there is ~ 30 seconds wait for very first play, no delay after that. There is a subsequent ~ 3 seconds delay on refresh and first play. Nexus 4 Chrome Browser. – misterManSam Commented Dec 2, 2014 at 6:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

One way of doing that for smaller audio files is pre-loading the file as a blob:

<button>play</button>
<audio></audio>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'click.mp3', true);
xhr.responseType = 'blob';
var audio = document.querySelector('audio');
xhr.onload = function () {
    audio.src = URL.createObjectURL(xhr.response);  
};
xhr.send();
document.querySelector('button').onclick = function () {
    audio.play();
};
</script>

Please note that this requires XHR2 (http://caniuse./#feat=xhr2) and Blob URLs (http://caniuse./#feat=bloburls) and that the same origin policy applies here. Moreover, you should make sure that the file is sent with some strong caching headers to prevent that the clients reloads the file with every request.

Edit: Another approach is using Data URLs (see http://jsfiddle/apo299od/):

<button>play</button>
<audio></audio>
<script>
var audio = document.querySelector('audio');
audio.src = 'data:audio/mp3;base64,SUQzBAAAAAA...';
document.querySelector('button').onclick = function () {
    audio.play();
};
</script>

The disadvantages here are that it is harder to maintain and that it will inflate your response size by 33%.