CODEWITHSUNDEEP
javascriptjquery
Chidambaram
Chidambaram

Reputation: 444

Audio slider using arrow keys in jQuery

I want to make an audio slider using arrow keys(left,right). But the below developed code did not work. Where am i doing wrong in below code?

<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

Upvotes: 0

Views: 109

Answers (1)

Sourabh Somani
Sourabh Somani

Reputation: 2138

In your code I think you forget to add jQuery Library otherwise your code is working 

$(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;
    }
  });
});
<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>

Here is the code

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

Upvotes: 2

Related Questions