CODEWITHSUNDEEP
jqueryaudiosrckeydown
DCR
DCR

Reputation: 15665

Jquery change src of audio and play on keydown

I have the following code that's working except for case 78 (letter N). When this key is pressed the audio starts to play but then stops. The other keys play the new audio file. I think the problem might have something to do with the keydown being pressed when the src file is being changed. Here's a working fiddle: keysounds

<!DOCTYPE html>

<html>
<head>
   <script 
      type        = "text/javascript" 
      src         = "https://code.jquery.com/jquery-3.2.1.min.js"
      integrity   = "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin = "anonymous">
   </script>
   <script>
   /*global $ */
      $(function() {
         var playing;
         $(document).on("keydown", function(key) {
           playing = undefined;
           switch(parseInt(key.which, 10)) {
              case 68:
                 playing = $("#sound0").get(0);
                 break;
              case 78:
                 playing = $("#sound0").get(0);
                 $("#sound0").attr("src",'sound2.mp3');
                 break;
              case 79:
                 playing = $("#sound0").get(0);
                 break;
              case 83:
                 playing = $("#sound0").get(0);
                 break;
              case 85:
                 playing = $("#sound0").get(0);
                 break;     
           };

           if(playing){
              playing.play();
           }

         }).on("keyup", function() {
            if(playing){
               playing.pause();
               playing.currentTime=0;
              playing = undefined;
            }
         });
      }); 
   </script>
   <style>
       div{
           text-align:center;
           margin-top:50%;
       }
       span{
           border-style:double;
           margin:.4%;
       }
   </style>
   <title>Keys</title>
</head>
<body>
    <div>
        <span>S</span>
        <span>O</span>
        <span>U</span>
        <span>N</span>
        <span>D</span>
        <span>S</span>
    </div>
    <audio  id="sound0" src="sound0.wav" ></audio>
</body> 
</html>

Upvotes: 0

Views: 353

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You change the src attribute AFTER having it getted in the playing variable.

It should work if you just inverse two lines, like this:

case 78:
   $("#sound0").attr("src",'sound2.mp3');
   playing = $("#sound0").get(0);
   break;

You should also reset the original audio source for next iterations.



EDIT

The use of a "flag" to determine if the key is held avoids the keydown event to trigger your script too often... and to let the music play.

/*global $ */
$(function() {
  var playing;
  var keyHeld=false;        // Flag!

  $(document).on("keydown", function(key) {
    if(!keyHeld){
      keyHeld=true;

      // Reset to original sound
      $("#sound0").attr("src",'http://www.sailwbob.com/sound0.wav');


      switch(parseInt(key.which, 10)) {
        case 68:
          playing = $("#sound0").get(0);
          break;
        case 78:
          $("#sound0").attr("src",'http://www.sailwbob.com/sound2.mp3');
          playing = $("#sound0").get(0);
          break;
        case 79:
          playing = $("#sound0").get(0);
          break;
        case 83:
          playing = $("#sound0").get(0);
          break;
        case 85:
          playing = $("#sound0").get(0);
          break;
        default:
          $("#sound0").attr("src",'');          // On other key, Play nothing!
          playing = $("#sound0").get(0);
                                    };

      if($("#sound0").attr("src")!=""){
        playing.play();
      }
    }
  }).on("keyup", function() {
    if(playing){
      playing.pause();
      playing.currentTime=0;
      keyHeld=false;
    }
  });
});

Here is your Fiddle updated

Upvotes: 1

Related Questions