Использование события onKeyDown с CharCode

Я делаю свой собственный плеер с drumpad, и мне нужна помощь в назначении функций клавишам клавиатуры. У меня есть плейлист (сейчас) 3 звучит:Использование события onKeyDown с CharCode

var playlist = [ 
     { 
     artist: "Snare", 
     title: "Snare", 
     source: "Snare.wav" 
     }, 
     { 
     artist: "Kick", 
     title: "Kick", 
     source: "Kick.wav" 
     }, 
     { 
     artist: "Clap", 
     title: "Clap", 
     source: "Clap.wav" 
     }, 
    ];

У меня есть некоторые функции, которые я бегу кнопками:

var currentSong = 0; 

    var play = function() { 
    var audio = document.getElementById("audio1"); 
    audio.play(); 
    } 
    var pause = function() { 
    var audio = document.getElementById("audio1"); 
    audio.pause(); 
    } 
    var jeden = function() { 
    var audio = document.getElementById("audio1"); 
    currentSong = 0; 
    audio.src = playlist[currentSong].source; 
    } 
    var dwa = function() { 
    var audio = document.getElementById("audio1"); 
    currentSong = 1; 
    audio.src = playlist[currentSong].source; 
    } 
    var trzy = function() { 
    var audio = document.getElementById("audio1"); 
    currentSong = 2; 
    audio.src = playlist[currentSong].source; 
    }

<body> 
    <audio autoplay="autoplay" ontimeupdate="showinfo()" id="audio1" controls="controls"></audio> 
    <br/> 
    <button onclick="jeden()">1</button> 
    <button onclick="dwa()">2</button> 
    <button onclick="trzy()">3</button> 
</body>

Я думаю, Самый простой способ - назначить кнопки клавишам клавиатуры. Кто-нибудь может мне помочь?

источник

2015-05-03 Robxsy

отступы ваш код – gsamaras

вы получите правильное решение? – vasilenicusor

dzień Добры

Код будет что-то вроде этого. Вы можете изменить keypress() на keyup() или keydown(), если это подходит - проверьте документацию этих функций, чтобы оценить различия.

$('body').keypress(function(event) { 
    if (event.which == 49) { 
    jeden(); 
    } 
});

я ссылался на этой странице, чтобы определить число 49 означает, что ключ 1: https://css-tricks.com/snippets/javascript/javascript-keycodes/

Я должен упомянуть, что это решение JQuery, и вам нужно будет узнать некоторые основные настройки Jquery. Это популярный подход к решению этой проблемы. Вы также сможете использовать jQuery, чтобы сделать свой существующий материал намного приятнее.

Вот пример. https://jsfiddle.net/7j0krzx5/

источник

2015-05-03 12:08:16 braks

использование этого

$(document).on("keydown", function(event) { 
    if (event.which === 80) // P key 
    { 
     event.preventDefault(); 
     // do something e.g 
    } 
    else if (event.which === 78) // N key 
    { 
     event.preventDefault();  
     // do something 
    } 
    // console.log(event.which); 
});

JSFiddle example

Если вы не хотите использовать JQuery

var play = function() { 
    alert("Play"); 
} 
var next = function() { 
    alert("Next"); 
} 
function keyDownListener(event){ 
    var keyCode = ('which' in event) ? event.which : event.keyCode; 
    if(keyCode === 80){ // P key 
     event.preventDefault(); 
     play() 
    } 
    else if (keyCode == 78) { // N key 
     event.preventDefault(); 
     next(); 
    } 
} 
document.addEventListener("keydown", keyDownListener, false);

JSFiddle example

источник

2015-05-03 12:14:12 vasilenicusor

Использование события onKeyDown с CharCode

ответ

Смежные вопросы