How to instantly play an audio clearly using javascript without any lag?

Question

I am developing a Javascript based app in which I use a clapping sound whenever a user clicks a button. The sound must play as soon as the user clicks the button(There should be no lag). I recorded the sound using audacity and saved it in wav format. Initially there was a lag before clap sound and I could hear the sound clearly when clicked on the button but a bit late as there is a lag before the sound as I have mentioned (You can see it in the picture below).

I am not interested in the lag before the sound as I want the user to hear the sound as soon as he press the button. So I removed the lag in front of the clap in audacity as shown below.

The sound was again saved in wav format and I can hear the sound clearly when played in audacious and winamp. But when I click on the button in the app when it is opened in a browser the clap sound became very mild as if I cannot hear that at all. I am really confused as I am not sure whether the problem is related to the file format or the javascript. Is there any way to play the sound clearly as soon as a button is clicked using javascript?

[updated part]

I am really sorry. There was a bug in my code. I set the initial time of the audio to 0.05 which caused the problem.

tapSound.currentTime=0.05;
tapSound.play();

Now that I can hear the sound clearly but there is still a lag before the sound everytime I click the button.

This is the javascript code that I have

var tapSound=new Audio();
tapSound.src="sounds/tap.wav";
tapSound.preload='auto';
$(".refresh, .backspace, .home, .pause, .about, .backbutton").on('click',function () {
tapSound.currentTime=0.01;
tapSound.play();
});

I don't know the answer, but you can play the sound with javascript. — Evan Carslake, Aug 02 '15 at 15:24
@dman2306 It is really a large script with 1000s of lines. Basically what I did is `var clap=new Audio(); clap.src="sounds/clap.wav";` and inside the click function I used `clap.play();` — Sandeep Thedarkprince C, Aug 02 '15 at 16:22

score 3 · Answer 1 · answered Aug 02 '15 at 15:47

3

You need to set the preload property of your Audio object to 'auto':

var audio = new Audio();
audio.src = "yourfile";
audio.preload = 'auto';

This code must be executed when you load your page, not when you click the button. When you click the button, just call the play() method for the audio object.

answered Aug 02 '15 at 15:47

rcpinto

4,166
2
24
25

The problem is not related to the time taken for loading. When I press the button for the very first time the audio will be loaded and cached. But the same problem persists for further clicks too which proves that the problem is not related to loading. – Sandeep Thedarkprince C Aug 02 '15 at 16:18
So please, include the code in your post so we can help you better. – rcpinto Aug 02 '15 at 16:20
As I have mentioned the script file is nearly 1000 lines long. And the audio part include the same that you have mentioned in your answer. The audio is playing and I can hear it but it is very mild. – Sandeep Thedarkprince C Aug 02 '15 at 16:26
Now the sound works with good clarity but it takes a little time after the button is clicked to play the sound. – Sandeep Thedarkprince C Aug 02 '15 at 16:57
You should also test your code in more than one browser to see if this lag is browser specific. – rcpinto Aug 02 '15 at 18:48
I tried http://lowlag.alienbill.com and thats what I am looking for. But the kit is too heavy. My app is having a size of nearly 1 MB and the kit alone is 384 KB. – Sandeep Thedarkprince C Aug 03 '15 at 06:46

How to instantly play an audio clearly using javascript without any lag?

1 Answers1