If your browser supports it, using the Gamepad API in your own code is pretty simple.
The first thing to do is listen for `gamepadconnected` events on `window`.
This will fire once for every gamepad. It will fire when a gamepad is connected, or the first time it's detected by the browser, like if it was already plugged in and you just refreshed the page. The callback is passed a `GamepadEventInit` object.
window.addEventListener("gamepadconnected", (event) => {
console.log("A gamepad connected:");
console.log(event.gamepad);
});
window.addEventListener("gamepaddisconnected", (event) => {
console.log("A gamepad disconnected:");
console.log(event.gamepad);
});More importantly, to get updates on the current gamepad state, you need to call `navigator.getGamepads()`, which returns an array of currently connected gamepads, and their current button and axis positions. Typically you'd call this function once per frame.
var gamepads = navigator.getGamepads(); console.log(gamepads);
What you get back looks like this:
[
{
axes: [0.01, 0.01, 0.02, 0.04],
buttons: [
{ pressed: true, value: 1 },
{ pressed: false, value: 0 },
{ pressed: false, value: 0 },
{ pressed: false, value: 0 },
[...]
],
connected: true,
id: "Xbox 360 Controller (XInput STANDARD GAMEPAD)",
index: 0,
mapping: "standard",
timestamp: 177550
},
null,
null,
null
]Some things, like right and left triggers on an xbox controller, are reported as buttons, with a floating point `value`s.
Recently, vibration support has been added in Chrome, which can be called like this on xbox and ps4 controllers (at least).
gamepad.vibrationActuator.playEffect("dual-rumble", {
startDelay: 0,
duration: 1000,
weakMagnitude: 1.0,
strongMagnitude: 1.0
});There are more experimental APIs in the works, with things like VR pose data, haptic feedback, and more, but they are not widely supported at this time.
Gamepad API - detailed information about the Gamepad API including experimental features.
Copyright 2013-2025
Version 1.5.0
Privacy Policy
Contact