Play Audio While Mouse Button is Pressed

I’ve got stuck on Simon Game. I’d like to play a sound while the mouse button is down. In other words, if the mouse button is keep pressed an audio is keep playing.

I’ve tried this:

  var interval;
  $("#button1").mousedown(function() {
    interval = setInterval(playAudio(1), 100);
    return false;
  });
  $("#button1").mouseup(function() {
    clearInterval(interval);
    return false;
  });

But it didn’t work. It plays only once and then stops. Why it doesn’t keep playing the audio?

My code is here: http://codepen.io/raulfm/pen/qmdwpb?editors=1010

setInterval() requires a function definition. You’re firing the function. its more like:


setInterval(playAudio, 100);    

function playAudio() {
  var strAudio = "audio1";
  var audio = document.getElementById(strAudio);
  audio.play();
}

2 Likes

So, the function inside setInterval cannot have parameters? I made what you said. The audio repeted, but when I change the value ‘100’ the speed doesn’t change. I would like to repeat the audio very fast to make an effect of a continuos sound.

I believe that has to do with .play(). you may have to finish a sound before you start another. Try playing a tone? followed by a fade or concluding sound?
No. No parameters in setInterval(). you can, however, do something like…

setInterval(function(){
        playAudio(someParameterThatIsInScope);
}, 100);  

1 Like

I think @pompan129 is right about the clip having need to finish before it will reply. If I remember correctly, for the clips in question there are also periods of time before and after the tone plays. It is possible to set the playback position of the HTML DOM Audio Objcet—I tried to clip the silence with Javascript for a repeat and I personally couldn’t find a way to have the tone play continuously using the audio clips supplied.

In addition, it should be noted that there is always a significant delay (on my setup it’s about 700-800 ms) to playing when trying to play an HTML DOM Audio Object on Safari—preloading the clip does not help, clipping it doesn’t do anything either.

The Web Audio API probably gives you much finer control of using clips and would not suffer from delays, too—but I haven’t tried using it with audio clips to say that it is a solution. I personally went with using oscillators in the Web Audio API because the learning curve seemed shallower at the time, and I also liked the idea of generating sounds from scratch. I found these examples in the MDN documentation particularly helpful. I also made small demo on CodePen for practice back then if you are interested (see below).

Good luck! :slight_smile:

2 Likes

I’ve tried another code:

 var audio;
  $("#button1").mousedown(function() {
    audio = document.getElementById("audio1");
    audio.loop = true;
    audio.play();
    return false;
  }).mouseup(function() {
    audio.loop = false;
    return false;
  });

Now, using loop atribute with true value, the audio repeats. But It still doesn’t repeat very fast. I still doesn’t make a continuos sound.

I think the easiest solution (KISS) is to use a Loooooong audio. I went for the same effect and just used like a 45 second audio. And set a faliure condition if the user didn’t make a new choice within 30 seconds. my codepen is here for ref…
http://codepen.io/fazbat/pen/zvQNzM?editors=0010

… no go with oscillators thing. That is really cool

cool demo. I will play with this.

About using the long audio. FCC, at Simon Game exercise, give this hint:

Hint: Here are mp3s you can use for each button: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.

So, FCC give a hint to use that sounds. How can I make them longer?
Is the FCC hint not very good?

its a good hint. but you want to add something more. that,s cool too. You can grab sounds from wherever you want & still satisfy the user story. My sounds are below. Use them if you want. Or generate/find your own. Or edit sounds from FCC with audio software. its all good…
"https://res.cloudinary.com/kurt-johnson/video/upload/v1491432845/simon1_ppd3st.mp3"
"https://res.cloudinary.com/kurt-johnson/video/upload/v1491432845/simon2_gzcr2p.mp3"
"https://res.cloudinary.com/kurt-johnson/video/upload/v1491432845/simon3_pokitr.mp3"
"https://res.cloudinary.com/kurt-johnson/video/upload/v1491432845/simon4_zqumyi.mp3"
https://res.cloudinary.com/kurt-johnson/video/upload/v1491432844/simon_buzz_ufziqo.mp3

1 Like