You must Sign In to post a response.
  • Category: JavaScript

    Seeking the audio file to play through keyboard keys even when the cursor is out of the audio file

    Below is my JavaScript code to play html5 audio file through keyboard and these are the corresponding keys that are used to play through keyboard. But these keys are working only when my cursor is in the audio file below.

    I have CK Editor; if I am typing something in CK Editor and using these keys while typing they are not working again. It works through key board keys only when my cursor focus is in the audio file. How can I make this audio file to work with these keys even when I am typing something at CK Editor?

    <script>
    var audio = $("audio")[0];
    $(document).keydown(function (e) {
    var unicode = e.charCode ? e.charCode : e.keyCode;
    console.log(unicode);
    // F7
    if (unicode == 118) {
    audio.currentTime += 2;
    // F8
    } else if (unicode == 119) {
    audio.currentTime -= 2;
    }
    //F9
    else if (unicode == 120) {
    audio.volume += 0.1
    }
    //F10
    else if (unicode == 121) {
    audio.volume -= 0.1
    }
    // spacebar
    else if (unicode == 32) {
    if (audio.paused) {
    audio.play();
    }
    else {
    audio.pause()
    }
    }
    window.addEventListener("keydown", function (e) {
    // space, page up, page down and arrow keys:
    if ([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
    e.preventDefault();
    }
    }, false);
    });
    </script>

    My requirement is even when I am working with CK Editor my keys should work to play, forward, backward, increase volume and decrease volume. But with this code I am able to control the audio file through these keys only when my cursor is at audio file. If I am out of it these keys are not working but they should work even when my cursor focus is out of audio file

    <CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor/" runat="server"></CKEditor:CKEditorControl>

    This is my CK Editor where user types something while listening. If I am using these keys while typing at CK Editor keys are not working. How can I make these keys to work even when I am typing at ckeditor also?
  • #766936
    Hi,
    Use basic html 'audio' tag. It will play sound file as well as support keyboard keys as follows:
    Space bar: To Play/Pause the audio.
    Right arrow key: Seek forward the audio.
    Left arrow key: Seek backward the audio.

    After Num Lock Off:
    Right keypad '6' key: Seek forward the audio.
    Right keypad '4' key: Seek backward the audio.

    Try and run this code in Firefox:

    <!doctype html>
    <html>
    <head>
    <title>Audio Sample</title>
    </head>
    <body>
    <h2>Audio Sample</h2>
    <audio src="Kalimba.mp3" controls autoplay loop>
    </audio>
    </body>
    </html>

  • #766939
    In the HTML5 you have the <audio> tag. You can directly use your audio files on that.
    <audio src="Your audio file" > </audio>

    And also lot the Javascript plugins available. And you can try to implement that in your application

    By Nathan
    Direction is important than speed


  • Sign In to post your comments