Detecting shaking in html5 mobile

Question

I'm building a web app in html5 at the moment that needs to be able to detect when the user shakes their phone and how fast they are shaking it. I've been browsing around but can't seem to find any examples of how I could implement this. I know html5 has an accelerometer that can detect the orientation of the phone, but how does it detect the speed at which the user is shaking it?

Also I'm testing this on my iPhone, although ideally I would like it to work on Android devices too. Thoughts? Examples would be great too. Thanks!

Conservative

You can use this jQuery plugin. And you can also read this... html5rocks.com/en/tutorials/device/orientation The event, btw, must be supported by your mobile browser. – Trometer

This was actually one of the only references I could find to it. I just couldn't get enough out of it to move on. Thanks, though! – Conservative

Answer 1

shake.js looks to be a good library for this - it provides a custom 'shake' event and is supported on modern browsers. Here's an example setup from their documentation on how you could implement it:

<script src="shake.js"></script>
<script>
var myShakeEvent = new Shake({
    threshold: 15, // optional shake strength threshold
    timeout: 1000 // optional, determines the frequency of event generation
});

// Start listening to device motion
myShakeEvent.start(); 

// Register a shake event listener on window with your callback
window.addEventListener('shake', shakeEventDidOccur, false); 

//function to call when shake occurs
function shakeEventDidOccur () {

    //put your own code here etc.
    alert('shake!');
}
</script>

Note that this does not work in some browsers when in an insecure browsing context (eg. http://)

Sofer

It looks like the project may not have support anymore. Reading one of the issues, you may have to request permission to use the device motions APIs for the library to work. – Sofer