Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » iOS Volume Control in PhoneGap

iOS Volume Control in PhoneGap

Published on March 27th, 2012

Phonegap developers are leveraging many different technologies to create iOS Apps. On a basic level, you have the native Objective C, which most would call the native language. On top of that, you have the PhoneGap framework that simulates a browser window that in turn lets you display your web languages: HTML5, CSS3, and Javascript. More specifically, we are using a subset of Javascript called jQuery, and more specifically, a subset of jQuery geared towards mobile devices called, dun dun dun, jQuery Mobile.

That is a lot of layers to be concerned with, each having to work in tandem to make sure you are delivering a near-native App experience to your users. Case in point, I’ve been struggling with the volume in Whipped. It is an iPhone, after all, so the little speaker is understandably not that good. However, Whipped was just too dang quiet to be useful. I downloaded a few of the other audio sound Apps and they were a bit louder, but after spending time resampling all of the whips, I just couldn’t get the speaker to send out a louder smack.

Today my buddy George on Facebook made a comment on my wall. He noticed that the first time you hit the volume control on the phone, it actually turns the volume of the zApp up, but all future attempts to increase the volume would control the phone’s ringer. Come to think of it, I did notice that the volume on my iPad was much louder than on the phone. A little Google research lead me to a plugin for PhoneGap called VolumeSlider. This plugin allows you to hook into the iOS’s native volume control from your javascript functions.

Add the plugin much like any PhoneGap plugin:

  1. Add the VolumeSlider.h and VolumeSlider.m classes to your Plugins folder in Xcode.
  2. Add the VolumeSlider.js file to your www folder
  3. Add the VolumeSlider.js to your html file. eg: <script type="text/javascript" src="VolumeSlider.js"></script>
  4. Add the plugin to the Cordova.plist under Plugins (key: “VolumeSlider” value: “VolumeSlider”)

After that, all you need to do is call the slider function to place it on your screen.

window.plugins.volumeSlider.createVolumeSlider(10,350,300,30); 
// origin x, origin y, width, height
window.plugins.volumeSlider.showVolumeSlider();

Once I added the volume slider to Whipped, I could see the volume was hardset at 50%! Sliding this up to 100% doubled the volume making the zApp completely usable in those awkward Whipped situations!

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.

 

3 Responses

  1. audiodev

    Any luck with Cordova 1.9.0?
    Followed this and while there are no errors reported in xcode – still don’t see the slider.
    Cordova 1.9.0, jquerymobile-1.1.1.js, jquery1.7.2, xcode 4.3.3, cordova.plist plugins have VolumeSlider/VolumeSlider.

    … at a loss …

  2. Adam

    Would be good if I could control the volume of individual sound levels programmatically in javascript .

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub