Andrew Trice is a Technical Evangelist with Adobe Systems. Andrew brings to the table over a decade of experience designing, implementing, and delivering rich applications for the web, desktop, and mobile devices. Andrew is an experienced architect, team leader, accomplished speaker, and published author, specializing in immersive experiences, mobile development, realtime data systems, and data visualization. Andrew is a DZone MVB and is not an employee of DZone and has posted 53 posts at DZone. You can read more from them at their website. View Full User Profile

Halloween Fun with PhoneGap

10.31.2012
| 2960 views |
  • submit to reddit

About two weeks ago I had a random thought… “Wouldn’t it be fun to build a free Halloween sound effects app using PhoneGap?” (I tend to get excited for any holiday). I had already done a lot of work using sounds in PhoneGap apps with my LowLatencyAudio native plugin, so the groundwork had already been laid.  Next thing you know, I’m searching for sound files (freesound.org is a fantastic resource for creative commons sound effects). Write some JS code here, add some CSS styles code there, and next thing you know I had a complete app. The best part – this app went from idea to App Store submission in under 48 hours (yes, I did sleep during this 48 hour period). Add one more day, and it’s ready for Android.  That is the power of PhoneGap.

Now, I’d like to introduce you to “Instant Halloween”. Instant Halloween is a Halloween-themed sound effects app built with PhoneGap. My app store description is:

Instant Halloween is a fun holiday application to help you scare the pants off of your friends! Use it to create a creepy ambiance, or play scary Halloween sound effects to liven up any situation. This app is best experienced turned up really loud!

Check it out in the video below, and make sure you have your sound turned on!  

It is definitely best when turned up really loud. There’s nothing like an ear-splitting shriek combined with the thumping bass of the heartbeat and thunder in the background. I connected it to a home theater with a decent subwoofer, and it was awesome. Setup some speakers in the bushes next to your front door, and you could use this to really scare some children on Halloween. (I take no responsibility for your actions.)

You can download it for free today for both iOS and Android devices:

 

It supports both phone and tablet form factors, which you can see in action here:

I started out using CSS media queries and Twitter Bootstrap for a responsive layout.  However, I ran into a few issues with column layout and content wrapping, so I ended up going with a totally custom solution.

Of course, just releasing a new PhoneGap app in the ecosytems isn’t enough.  As usual, I’m releasing the full source of this application for anyone to explore and learn from.  All HTML/JS/CSS source code between the iOS and Android versions is exactly the same (note: I’ve submitted an updated build pending approval for iOS to bring it in parity with the Android build).

You can download the full application source code at https://github.com/triceam/Instant-Halloween.  Be sure to also read the README file for complete set up instructions and references to the sound files.   This project uses my LowLatencyAudio PhoneGap native plugin for layered sounds in PhoneGap applications.

Sounds

The audio assets are not redistributed in GitHub due to copyright law. However, all of these assets are available under Creative Commons licenses from freesound.org. Be sure to review the individual licenses for each file before any attempt to use them in any commercial or non-commercial work. You can access specific download links in the readme.

All sound files were converted to 16bit 22050 Hz MP3 files. You can use a higher quality/bitrate if you want. I chose the lower quality due to skipping and memory issues on older/low-end Android devices.

Attribution

The font used within this application is “Creepsville”, available for free. An embedded font was chosen over a hosted web font so that the font will still work in offline scenarios. The TTF font was converted for in-browser use with Font Squirrel Generator.

The “Skull” icon used by this application is by Tim Piper, from The Noun Project

Code Libraries

The following libraries were used within this application:

  • Zepto - for quick and easy DOM manipulation
  • iScroll - for cross-platform touch-based scrolling of visual elements
  • MustacheJS - for HTML templating

Quick Links

Enjoy!

Published at DZone with permission of Andrew Trice, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)