Question

除了案例78（字母N）之外，我有以下代码可以使用。按下此键时，音频开始播放但随后停止。其他键播放新的音频文件。我认为问题可能与更改src文件时按下的keydown有关。这是一个工作小提琴：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>

Answer 1

在src变量中加入playing属性之后，您可以更改它。

如果您只反两行，它应该可以工作：

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

您还应重置原始音频源以进行下一次迭代。

<小时/> 的修改

使用＆＃34;标志＆＃34;确定密钥是否被保留避免keydown事件过于频繁地触发您的脚本...并让音乐播放。

/*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;
    }
  });
});

这是您的Fiddle updated

Jquery更改音频的src并在keydown上播放

1 个答案: