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!

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://)