SwiftUI Volume Slider for Apple Watch

Developing an Apple Watch application for audio playing can be a real pain as you have to handle many aspects. In this article I am going to show you how you can implement SwiftUI Volume Slider for Apple Watch.

Let’s have a look on all possible ways.

There is a MPVolumeView, that allows you to make a slider control for setting the system audio output volume. Apple developer documentation contains a long section how to customize the Volume Slider’s appearance. But unfortunately it doesn’t support in Apple watch.

Apple developer documentation offers to use WKInterfaceVolumeControl to control the volume in Apple Watch. There is an easy way to implement it. Create a ‘VolumeView’ using ‘WKInterfaceObjectRepresentable’ like below:

Then use it in your view hierarchy with opacity = 1 like below:

VolumeView

You don’t have a lot of options to customize it. All that you can do is to change tintColor:

VolumeView tintColor

The problem of this approach is that VolumeView can be only a circle by default. Meanwhile we are working with a small screen of the Apple Watch, therefore it is not always possible to use so much space of the screen only for the volume controller. Usually we need to show a lot of important information for a user like audio control buttons, credentials of playing audio and etc. Therefore we need to find more compact location and shape for the volume controller. If we use best practices, how this problem is solved in such applications like “Now Playing app” from Apple or “Spotify”, we find that the most common way is to implement a volume slider from a digital crown side.

Volume controller in Now Playing app

Volume controller in Spotify

My first attempt was to use a default SwiftUI’s Slider. But it wasn’t successful due to poor opportunities to customize it. For example, we can’t even make a fully transparent background for SwiftUI’s Slider in Apple Watch.

SwiftUI’s Slider

Let’s try to improve already implemented VolumeView to get a Customized Volume Slider.

All you need to do:

1. Add the VolumeView to the view hierarchy with opacity = 0.

2. Listen to volume updates from the system.

3. Implement a vertical slider View.

4. Handle a volume slider appearance.

5. Add an extension to View to hide/show the view based on a boolean value.

6. Add the CustomWatchVolumeSlider to the view hierarchy in the proper place.

This is how the results screen looks like:

CustomWatchVolumeSlider

Now if you want to add more view elements to the CustomWatchVolumeSlider, like sound on/off icon, it is just enough to add a proper Image to the CustomWatchVolumeSlider. It gives you a very flexible and universal mechanism to customize the volume controller as you desire.

Thanks for reading! All feedbacks are appreciated.

Further Reading

Controlling volume of Apple Watch

Creating Audio Apps for watchOS

How to control and play music on iPhone from your Apple Watch

Dynamically hiding view in SwiftUI