A mobile responsive website with an audio player and volume bar

Question

I have a responsive site with an audio player function and a volume controller.

On a desktop browser the volume controller make sense, because you can have multiple tabs on the browser and control multiple audio. But in mobile, your phone audio is easily controlled by the the volume rocker or mute button. Not to mention you can't have multiple audio playing on mobile, at least not normally.

It makes sense to me let the user control the volume on the device rather than have a different volume control on the webpage and the phone.

Does it make sense to not having a volume control on an audio player function for a mobile page?

Answer 1

Just keep it

To the very least, for consistency sake. But also think about this: what if the user has a broken volume control on his/her device? You'd be providing an experience where user has lost the locus of control, which is one of the main things to avoid when designing your UX. The more control, the better, the less control, the worse. Do not worry about some small redundancy, since it won't affect your usability in a negative way. But NOT HAVING that control may cause real problems.

Additionally, some people likes to use on screen controls (me being one of them) whenever possible. For example, I leave my iPad on a stand and control volume with the on screen controls. Having to search for the physical controls would be extremely uncomfortable, would make the iPad fall or move from its position, would add additional work on a control when it's not needed at all. So, as you can see, there are lots of advantages on keeping it and, quite probably, not a single disadvantage.

Finally, sites like Soundcloud or YouTube use volume controls, and believe me they have tested things extensively with much more resources than what you have, so take advantage of that knowledge and use it on your site

EDIT: Added screenshots

Here you have Soundcloud on Safari / iPad and YouTube on Chrome / Android, you can clearly see the volume controls. Also, it seem you're confusing a responsive site with an adaptive version or even an app. Keep in mind not only they're not the same, but each one has its particularities. But even then, you should never take control off from the user

Answer 2

The physical volume control in a Desktop or Mobile lets the user control the boundaries of the volume. That is the maximum volume that can come out. The app volume control lets the user manage the boundaries of the app, where the app maximum can't be higher than the physical maximum.

You argue that as it is not possible to have 2 apps playing sound at the same time on Mobile then the app volume control could be skipped. This is true within the same app: lowering the volume from the app control and from the physical control has the same output.

However, the problem arises when the user switches to a different app, because then the physical control is the one that acts over the new app control.

So to put it in an example:

I have some apps that I want use muted (games for example), I use others that I want to use with volume (YouTube app for example). If there was only the physical control, and I were switching between these two apps I would have to constantly turn the volume up and down, or give-up and keep the game (annoying) sound on.

Answer 3

You should have Volume control on mobile too.

• Maintaining Consistency (Web - Mobile)
• Providing facility to adjust volume by touch (No more pressing of Volume button)
• Not changing Mobile phone's default volume

Answer 4

Keep it on desktop and hide it on mobile.

The reasoning is that when you are on desktop, you are often multitasking so controlling your audio mix can be useful. You may have multiple audio sources - a video, your app, a game, music, etc.

On mobile, you are more likely focused on a single task and your context sensitive volume hardware buttons will control whatever audio is being produced by the thing you are looking at at that particular moment.

This decision will benefit the user by avoiding confusion produced by redundant controls and removing screen clutter.

In addition, this perfectly fits with responsive design as well. Your site is adapting to the context in which it is being displayed.