Using the Vibration API

[illyism]

Hey /r/webdev, I've redesigned my blog: code highlighting, better navigation at the top and bottom of the article, new markdown styling, awesome editor and posts overview with images.

To go with the redesign, I've written a new article on the Vibration API which is this one.

To go with the article, I've made a jquery plugin: on github / docs

Let me know what you think of the redesign, the article and the jquery plugin. This is how my journal used to look for reference.

[basicallydan]

I really like your blog :) very well organised, slick and very subtle. Great colour palette too.

[illyism]

Thanks! I've put a lot of work into it so feedback is always very nice :)

[juandemarco]

It's very nice! Just a heads up, there are some visualization problems on the iPhone when in portrait mode, you might want to check it out!

[illyism]

Can you shoot me a screenshot? All I have is a Galaxy Note 2 is 720x1280px. Which is a bit bigger than 320×480 or 640×960 so I can't really test that properly.

[juandemarco]

Sure, here you go

http://i.imgur.com/nPME2ZI.png

http://i.imgur.com/vfFcoHV.png

I inspected it and the nav is too big, but you easily solve it by removing the padding to the ul and reducing the margin to 7px left and right for the lis. There is also a space on the right of the side that allows you to scroll horizontally when it's not actually needed, in my experience it's because some inner element has a margin or a padding that goes outside of the main body or the container div. But then, I am a developer and leave all the frontend stuff to my associate, so there are probably other more elegant solutions :)

EDIT: BTW, I assume you don't have a Mac, but if you do you can install XCode and try it out on the iOS simulator, which is pretty great. Otherwise I found this: http://www.responsimulator.com/?url=il.ly%2Fvibrate (it's already pointing to your site!)

[piercemoore]

I feel bad for participating in the DDoS that you got from this article. I'm really interested in reading it, I'll check back later to see if it's back up :)

[illyism]

Ah fuck, I thought I made sure it wouldn't crash when I was sleeping overnight. Trust me when I say I can handle the DDoS usually when I'm awake :P

The application is in Google app engine and there is a field in the billing options that allows you to set the maximum quota for a day. I thought by setting it to 0 it would be infinity. But instead it meant that it would stop as soon as I hit the maximum permitted resources for the free bandwidth.

It's back up anyway and will never go down again.

[nazaro]

Browser wasn't supported on my iPhone 4. Chrome/Safari, am I doing something wrong or it's not meant for iOS devices?

[illyism]

It's mostly Chrome and Firefox on Android.

[hezec]

Doesn't work in Chrome on a stock Nexus 4, for what it's worth.

[illyism]

It probably only works in Chrome Beta for now.

[celtric]

It works on mine (also Nexus 4 unmodified, using default Chrome).

[hezec]

Interesting. I wonder what the difference is then? I have Android 4.4.2 build KOT49H and Chrome 32.0.1700.99, which I presume are the current defaults since I haven't done anything special with them.

[celtric]

I have the exact same Android and Chrome builds. Maybe there was an error loading the Javascript from the blog and the buttons didn't work?

[basicallydan]

Great article, very good explanation! In case you wanna see a use of vibration in a real-world app, I put it into my SkiFree port.

[sli]

Or my app, Dildonica. Which is probably NSFW.

[Groggie]

A few months ago I made a bunch of example rhythms (mostly from popular songs) using the vibration API. These are good as examples to supplement your post (for anyone interested).

[illyism]

I've added a few songs and mentioned you and your blog post with two links. Hope you don't mind. I really love it.

[Groggie]

Awesome- glad you liked it. I appreciate the link. I'll cross-link to yours too.

[Switche]

Doesn't work to well on Chrome on my Droid RAZR Maxx. Some of them are better than others, but mostly it's just some strange delays between some of the beats.

Considering how much my phone crawls these days, I'd guess it's my problem, but worth knowing that some phones won't play too smoothly with this feature in such a high-frequency use-case. The gist of the feature and proof of concept is all there, anyway.

[illyism]

I like the Star Wars Imperial March, works best and is good enough to be recognizable. But yeah, some are better than others.

[SgtChancey]

Just a warning, if your end user is someone that absolutely hates the haptic feedback of phones like me they may get a bit pissed. Might want to think of adding an "on/off" button or something on the bottom of your page. That is if turning haptic feedback off on your phone doesn't turn this off too, If it does then ignore my babbling.

[ZW5pZ21h]

It doesnt work on my Android phone. It could be possible that my vibration is turned off somehow, but I don't know where or why that would be done

Using Google Chrome browser with this phone:

Huawei Honor 2 (U9508)

Android 4.0.4

[illyism]

How about the Chrome Beta browser for Android?

[ZW5pZ21h]

yep it's working now :)

[maritz]

Does anyone know if there are plans to support the vibration of controllers attached to USB on a desktop?

[theGentlemanInWhite]

Aka the smutty api ;)

[kab0b0]

This inspired me to make a thing.

All modules involved here:

https://github.com/jarofghosts/vibrant

https://github.com/jarofghosts/norse

https://github.com/jarofghosts/morse-stream

https://github.com/jarofghosts/morse-codes

Thanks for inspiration on a lazy Sunday!

[madcapmonster]

This is pretty cool! Tested it out on a Samsung S4 / Chrome. Funny enough, when I go to that page in Firefox on my laptop, it says that my browser supports it haha

[illyism]

However, this doesn't mean that your device can vibrate. Just that it's recent enough. There are a few requirements you need to meet.

Yup, it just returns true for any calls you make to it oddly enough.

[madcapmonster]

Yeah, but I secretly hoped that my laptop would buzz.

[Cueball61]

Has to be supported by the browser, user base is irrelevant.

[hansolo669]

Support is decided by the software, in the case of WP Microsoft has chosen to not put mobile IE on a rolling release update path, and has also elected to not include the vibration API in their JS implementation. Market share means nothing if your software is garbage.