Vibration API Tutorial #297

Closed
KraigWalker opened this Issue Feb 17, 2013 · 28 comments

10 participants

@KraigWalker

html5vibration

Prelude

I've been getting my teeth cut working on a browser game for work. One of the fun little additions we've added is support for the HTML5 Gamepad API. Reading button presses off an Xbox 360 controller was easy enough; but then we just had to ask "What About Force Feedback? It's been in controllers since the 90's. Right?"

After a couple of emails to the editors of the Gamepad API demanding to know where our precious rumble pak was, Scott Graham got in touch, saying the feature had been "lightly discussed" in the early days of the Gamepad API, and has since now taken a form of it's own: The Vibration API

And we were like...

tumblr_mhu3981PA71s4woeho1_400

Say Hi to the HTML5 Vibration API

The Vibration API is one of few API specifically intended with gaming in mind. In contrast with the Gamepad API however, which is slowly building up a wider user base, many people I've spoken to, not to mention many documentation sources, didn't get the memo about also being able to make those gamepads wiggle.

It is logical however to keep the two API's separate however. Devices like the original Xperia Play come with their own gamepad and thumbsticks, it does not however have vibrating motors intended for gaming.

What I'd Like To Do

I'd like to write a tutorial to get people up and running with the Vibration API. It's not the biggest, most complicated API in the world, but I feel it's the missing part of the Gamepad API that a lot of people aren't aware of. The biggest impact I think it can have is in getting the ball rolling with discussion on how the API can be improved on. The core topics being discussed in the tutorial would be:

  • A high level overview of what the Vibration API does
  • What browsers currently support the API
  • What devices should be used with Vibration
  • A cross-browser friendly method of using Vibration in games and web apps
  • Understanding how vibration patterns work
  • Using patterns to create different types of rumble effects (with examples, of course)
  • Some limitations to bear in mind
  • What the future might hold for Vibration

What I'm Also Going To Do

I'm going to address some awareness issues on projects like HTML5 Please, which doesn't yet list the API yet.
Modernizr added support for detecting Vibration support in 2.6, which I'd like to use in my tutorial in a similar way to the Gamepad API tutorial by Marcin Wichary.

May The Force (Feedback) Be With You

@ebidel
HTML5Rocks member

Haha. Nice proposal. What's the current browser support look like?

@KraigWalker

Thanks :) The API is currently implemented in Firefox and Chrome, with that branching out to the main webkit branch once it's progressed further through Standardisation. There are some tiny differences between the two implementations, but the functionality is identical.

@ebidel
HTML5Rocks member

I think it may be implemented in WebKit, but it's behind a compile time flag. Believe it only works in FF mobile, no?

http://davidwalsh.name/demo/vibrate.php

@KraigWalker

According to the webkit changelogs, you're right The Vibration API was quietly added to Webkit about a year ago. Chrome, however, is the only webkit browser to have it in a stable release. As for Firefox, it was included in 11.0 of Gecko with an additional moz prefix, which was dropped in version 16.0 (though the Gecko uses window.navigator.vibrate as opposed to webkit's window.vibrate)

Sounds a little convoluted, but basically, it will run in any Chrome and Firefox version less than a year old. Safari (and a webkit Opera?) will follow suite.

Again, the more usage examples that people start finding, the more popular the technique will become and the API will start getting a bit more love and affection 🏩

@psema4

Hmm. I asked on StackOverflow about Vibration API support in Google Chrome and got back the following response from Chrome Developer Relations: "We don't have it in Chrome for Desktop and we don't have it in Chrome for Android as of version 25." That was about 2 weeks ago: http://stackoverflow.com/questions/13633561/where-is-the-vibration-api-hiding-in-chrome-23/14831924

@ebidel
HTML5Rocks member
@KraigWalker

Sad times. a simple if check on navigator.vibrate turns up as not supported (chrome 25) - all the chromium issues I was researching were documenting the progress of including it in webkit.

So I guess the initial tutorial would only work in Firefox, but could it be updated once vendors start including the webkit implementation?

@ebidel
HTML5Rocks member
@paulirish
HTML5Rocks member
@PaulKinlan
HTML5Rocks member

Given the changes happening, I would be pretty keen to see this article written.

@PaulKinlan
HTML5Rocks member

@KraigWalker - are you still up for writing this article? Vibration is being worked on in Chrome for android.

@KraigWalker
@PaulKinlan
HTML5Rocks member

Excellent, if you want to share a draft with me I can help review it. Inline demos would be very appreciated.

It would be good to also set a due date (nothing too close) so that I can plan it in to our release schudule too.

Thanks!

@PaulKinlan
HTML5Rocks member

@KraigWalker any update on this?

@maxh

Any chance we could get this out in the next few weeks?

@pearlchen-old

@KraigWalker Don't know if you're covering WebView or not but, fyi, latest WebView for Android now has vibe support. Good for those games packaged using Cordova.

@PaulKinlan
HTML5Rocks member

Michael Van Ouwerkerk who implemented the API was planning on doing one.... will chase up.

@KraigWalker
@PaulKinlan
HTML5Rocks member

My preference is to avoid gaming altogether for now and focus on places where it should be used as well as gotcha's and snags (i.e, if you mute your device there is no vibration). For example I would love to see how it can be used when validation of a form fails. Or an event happens that requires the users attention.

Also a small library of good patterns would be very handy.

@dasilvacontin

@PaulKinlan I believe that if you mute your device there's only vibration and no sound - at least on iOS.

Not sure if avoiding gaming would be a good idea since it's probably going to be the most common case scenario in which the API is used.

@alexandervrs

To be honest, I think there should be a separate function for gamepad vibration like myGamepad.setVibration(leftMotor, rightMotor). The vibration API is supposed to target the entire device whereas a Gamepad vibration API would need to access individual devices for e.g. a 2-Player game.
I'd also like to see a way to have force feedback effects for devices that support them, in the future, like Joysticks and Steering Wheels which also could find ground in some medical applications as well. :)

@psema4

I haven't been following the spec development very closely but noted the controversy; tbh I think the whole thing is kind of silly: when we use sound, it's either (for example) stereo or mono. We don't have a spec for each. Perhaps I should dig into it a bit deeper because I just don't get why having multiple motors is an issue.

@KraigWalker: my original use case (and something I still want to do) requires API support on desktop; I wanted to hijack the output line and create a serial interface to allow web apps (with awesome UI's) to control electronic devices.

@PaulKinlan PaulKinlan closed this Mar 6, 2015
@Polyducks

I'm aware I'm conducting post necromancy here, but this is a discussion that had no real resolution.

I'd really like to see the rumble feature make it to web games. It adds an extra level of depth to the experience. As far as I'm aware, vibration support for game pads is not currently available in live or canary builds of browsers. Is this correct?

@KraigWalker
@Polyducks

Thank you so much for your depthy response.

It may well be that mobile devices move on from a single vibration motor - when that happens a new API will be required which would support all devices (including game pads). Do you think this is possible?

@KraigWalker
@KraigWalker
@KraigWalker
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment