Halloween Fun with PhoneGap

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!

  • http://dadeb.it davide

    I’m curious why did you use iscroll library since you don’t have any fixed toolbar or footer in the app. Shouldn’t native scrolling be enough ?

    • http://www.tricedesigns.com Andrew

      The header is stationary. It does not scroll with the body content. I used iscroll to scroll the body content and keep the header in place. I could have used CSS fixed positioning instead, but that isn’t supported well across all target platforms. iScroll lets me have one common codebase, with consistent behavior on all platforms.

  • Dara

    i have try follow u and try download ur source code and rebuild by phonegap but font not show. what wrong

    i have testing on google nexus i9250 and android version 4.2 custom

    i have download your app from android market is work font

    • http://www.tricedesigns.com Andrew

      Were any file paths to the CSS files or Font files changed? It is working without any issues for me on Android 4.2, on a Nexus 7.

  • Mark Teipe

    Would it make more sense to iterate the preloadAudio and preloadFX loops in this via the callbacks of those functions rather than FOR loops? This way the device could manage solid preloads congruently as well as have a final callback after the final asset in the array is loaded.

    • http://www.tricedesigns.com Andrew

      No, it wouldn’t make any difference really. The callback fires once the asset has been requested by the native layer, not after it is fully loaded. A lot of people have been asking for “load complete” and “play complete” callbacks, but I haven’t had time to add them yet.

  • Mark Teipe

    I forgot to ‘preload’ my last comment with a huge THANK YOU for all your work on this plugin. Soundboard interaction is such an underutilized and taken for granted design path and I think this plugin really opens a huge access path to a lot of greater innovation with interactive audio software and applications.

    • http://www.tricedesigns.com Andrew

      You’re welcome!

  • Ulrich

    Dear Andrew,

    thanks for sharing the code! I have tried to get it working but have the following problems:

    I have copied the plugin files for ios into Xcode and in Xcode I also added these files.

    But I cannot follow the last step:
    Add a mapping in Cordova.plist under “Plugins”
    I have no Cordova.plist but only a halloween-Info.plist (halloween is my project name).

    When I start the app in the iPhone simulator, it is showing “LOADING” all the time.
    I assume that is because the mapping has not been done?

    Could you please give me a quick help on this?

    I appreciate it!

    regards, Ulrich