I am building a very simple JS code where I can play "organ" (like a piano) clicking on buttons just like if I were playing a piano, tapping in the keys. I recorded 10 samples of 10 notes of my organ and saved each separetly file as mp3.
Then I created 10 buttons, when I click each button the sampled sound of that note is played. The problem that I am facing, is that there is always a small delay (like 200 to 300 ms) between clicking the button and the sound actually playing.
You can try a simplified code below which reproduces the "bug" very easily below:
$(document).ready(function() {
temp = new Audio("https://quemfazsite.com.br/temp/teclado/tons/102.mp3");
$("#play").on(
"click",
function() {
temp.currentTime = 0;
temp.play();
}
);
$("#stop").on(
"click",
function() {
temp.pause();
}
);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="play">PLAY</div>
<div id="stop">STOP</div>I also tried using an <audio> HTML element but the same delay happens. In the past I found a website very similar with what I am trying to build right now, and it played the sounds very smoothly, fast... but I cant find it anymore.
Do you have any idea what I can do to remove the delay that I am facing? I tried this code on 2 different notebooks running Windows 10 and also on and Android phone (samsung note). The delay is not in the audio file, I created each audio file using Audacity and I made sure there is absolutely no empty space at the beginning of each mp3 track.
And there is one more problem: sometimes when I click the PLAY button, there is some small noise which lasts no more than probably 50ms, is very very fast noise, and it shows up randomly... This same exactly problem happened on the 3 devices I tested. Any suggestion I could try my friends?