在jQuery中使用箭头键的音频滑块

时间:2017-12-14 05:37:25

标签: javascript jquery

我想使用箭头键(左,右)制作音频滑块。但是下面开发的代码不起作用。我在下面的代码中哪里做错了?

<audio id="lessonTrack" controls>
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg">
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>


$(document).ready(function() {
  var audio = document.getElementById("lessonTrack");
  window.addEventListener("keydown", function(e) {
    var x = e.keyCode;
    if (x === 39) {
      audio.currentTime += 2;
    } else if (x === 37) {
      audio.currentTime -= 2;
    }
  });
});

jsfiddle

1 个答案:

答案 0 :(得分:2)

在您的代码中,我认为您忘记添加 jQuery Library ,否则您的代码正在运行

&#13;
&#13;
$(document).ready(function() {
  var audio = document.getElementById("lessonTrack");
  window.addEventListener("keydown", function(e) {
    var x = e.keyCode;
    if (x === 39) {
      audio.currentTime += 2;
    } else if (x === 37) {
      audio.currentTime -= 2;
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="lessonTrack" controls>
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg">
  <source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>
&#13;
&#13;
&#13;

这是代码

https://codepen.io/anon/pen/BJyejO