How to play sounds in JavaScript

Question

I have the following:

<audio id="clickdown-wav" src="ClickDown.wav" preload="auto"></audio>

and then in my JavaScript, I have:

var ClickDown = $('#clickdown-wav')[0];

$(document).delegate('a','click',function() {
    ClickDown.play();
});

The problem is that it's not too snappy (on an iPad) as I press anchor tags. There is a noticeable lag between the time I press the anchor tag and the wav file plays.

Q: Is there a source code only solution to playing sounds from JavaScript? Clickdown.wav is only 1k.

score 2 · Accepted Answer · answered Feb 23 '12 at 18:59

2

On iOS, there is no preloading. This was done by Apple on purpose, so that the user wouldn't have to use unnecessary bandwidth.

answered Feb 23 '12 at 18:59

Justice Erolin

2,869
20
19

3

It's always something, isn't it? – Phillip Senn Feb 23 '12 at 19:01
A workaround would be to trigger load() on a user event (click, scroll, etc). – Justice Erolin Feb 23 '12 at 19:16
Possibly, but @cf_PhillipSenn's phrasing seems to implicate *every* bound `a click` event, not just the first one. – msanford Feb 23 '12 at 19:39

score 1 · Answer 2 · answered Jul 28 '12 at 18:42

1

you need to use touch events not click events, switch your click to "touchstart" and the delay will disappear

answered Jul 28 '12 at 18:42

milkman

11
1

score 1 · Answer 3 · edited May 23 '17 at 11:56

1

You can try to place an invisible "button" over your web app, which get's click with the first user interaction. After that interaction sound.play(); should work. Look at this thread.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 23 '12 at 19:20

dom

11,894
10
51
74

How to play sounds in JavaScript

3 Answers3

Linked