Skip to main content

iPhone’s Magical Volume Buttons

By Jason Grigsby

Published on January 11th, 2011

Topics

A recent project pushed the boundaries of what is possible in mobile browsers. We learned a lot including some surprisingly simple things that everyone takes for granted like the volume buttons on the iPhone and how they work.

One of the features was a quiz that people could take on their phone. The quiz design was handled by another agency and they provided us with some cool sound files to use when the person got an answer right or wrong.

We built the site using HTML5 and quickly found that Android didn’t support HTML5 audio. Android 2.3 now supports HTML5 audio, but it was too late for this project.

On the iPhone side, we discovered what appeared to be a strange bug related to audio. Adjusting the volume didn’t seem to have any affect on the volume of the HTML5 audio clips. We began to fear that people playing the quiz would be upset when an ear drum piercing buzz came from the quiz and they couldn’t turn it down.

After nearly two weeks of believing HTML5 audio was broken, we encountered a phone that used to be loud that was suddenly quiet. What’s going here?

It was then that we learned about iPhone volume contexts. If you own an iPhone, you’re already aware of these volume contexts, but never consciously think about them because 99.9% of the time, it just works.

What do I mean by volume contexts? There is only one set of volume buttons and depending on what your iPhone is doing, they adjust different volume settings.

For example, if no audio or video is playing, the volume buttons adjust the ringer volume. However, when audio or video is playing, the volume buttons control the media audio level.

iPhone volume indicators

The iPhone provides feedback on what volume you’re adjusting by adding “ringer” above the volume level when you’re adjusting the ring level and leaves that out when you’re adjusting the volume of other audio.

But it’s not simply ringer or media contexts. The iPhone also keeps track of the volume level separately in each of these contexts:

  • Headphone
  • Headphone w/ microphone
  • Speakers
  • Bluetooth headsets

There may be more that I’m not aware of. I also don’t own a bluetooth headset so I’m relying on what I’ve been told.

The point is that it was nearly four years after owning my first iPhone before I gave any thought to how the iPhone was doing this. This is truly a remarkable design. It handles at minimum six different volume settings without the user ever giving thought to what volume they want to control.

They simply use the two volume buttons and 99.9% of the time the phone magically knows what they want it to do. You never have to think about it.

Until you build a quiz that falls into the .1% of the time when it doesn’t work the way you expect.

Our problem? the audio files were very short. Around a second each.

And unless you’re a speedster, you can’t hit the volume buttons quickly enough during that one second of audio.

Once that second passes, you’re back to adjusting the ringer volume and mistakenly wondering why the volume buttons don’t work on HTML5 audio.

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Comments

Michael Gorman said:

What about adding a couple of extra seconds of silence to the end of the audio clip? That way, if users try to turn it down right after hearing it, they can turn it down as expected, rather than adjusting another audio context. Just a thought.

Matthew Irish said:

Interesting, I hadn’t given it much thought either, but do this subconsciously. When I make sure my alarm volume is up when setting alarms, I always look for “ringer” on the volume overlay. It’s a pattern that’s borrowed from OS X (like many things iOS) – the volume keys on my laptop adjust a different volume context when I have my headphones plugged in, but there’s no visual difference in the volume overlays.

JP DeVries said:

Another annoying thing I’ve noticed is I’ve turned my volume down, put on headphones, played music, and damn near blown my ear drums out. I understand Apple’s case on thinking they are geniuses and that you should get in the habit of of changing volume after plugging the headphones in, but I still think that they should never turn the volume up on you, only down. For example, if I just turned my volume down to 50%, then put in headphones, the volume should be no louder than 50%.

Jason Grigsby (Article Author ) said:

@JP I rely on that behavior every day that I drive to work. I use a miniplug cable from my iPhone to the car stereo. For that input, having the volume up all the way it the best thing possible.

When I get out of the car, if I want to continue to listen, I put my headphones in. The iPhone detects the headphones with mic and puts the volume level at the last level I had for that combo which happens to be a level that doesn’t blow out my ears.

The next time I get in my car and plug my phone back into my stereo, it is automatically has the volume at the loudest setting again because that is the only place I use the miniplug without microphones.

That said, I can see your point. My behavior happens to work well with their system. But you’re right, there isn’t a way to adjust the headphone volume ahead of time when you KNOW you want to turn it down before blowing your ear drums out.

Jason Grigsby (Article Author ) said:

BTW, I just realized I forgot another context which is volume of an active phone call. There is a matrix somewhere that combines type of activity (e.g., phone call vs. media playback) with type of speaker (headphones vs. bluetooth) and stores each setting separately.

Justin Miller said:

Two thoughts about this:

1) Kind of along the same lines as Michael’s suggestion above (if you ever do this again): what about a long-ish, looping silent file to keep the stream open and in the right context? Perhaps not worth the bandwidth tradeoff, though…

2) Not that this is useful for users, but for testing: there is a new settings switch in 4.2 that locks accidental ringer volume change via the buttons.

Erik said:

Thank you for posting something on this. I was searching and searching for something on this. I discovered that often I would want to adjust the ringer volume but it was not adjusting. That’s when I noticed the “ringer” being there or absent when adjusting.

I often do not get to adjust ringer volume when I believe nothing is on or playing. I don’t know what is going on. I’ve even been in the settings area on the page that adjusts the ringer volume and it still wouldn’t adjust the ringer volume.

Anyone else have this problem? VERY frustrating. Maybe some app I have is messing it up?