Tutorial: System sounds

You can use any of the default system sounds that are available to all apps on the device that need to play asynchronous system sounds. These sounds are the same system sounds used by the operating system. For example, you might create a camera app that uses the shutter sound to indicate that a photo is being taken with the camera hardware.

This tutorial shows you how to play system sounds in an app. We create the app shown in the image to the right using two controls: DropDown that's used to choose a system sound, and a play button that's used to play the sound chosen.

You will learn to:

  • Set up your app to play system sounds
  • Use system sounds to respond to UI signals

The image to the right shows some of the system sounds that can be selected from the DropDown control.

System sounds app UI showing a dropdown and a play button

System sounds app UI showing a dropdown with many system sounds and a play button

Set up your project

Let's begin by creating a Cascades project using the template for a standard empty project. For more information about creating a project, see Tutorial: Create your first Cascades app.

First we need to import two useful libraries. For more information about libraries, see Library support.

import bb.cascades 1.2
import bb.multimedia 1.2

Our UI is based on a Page that contains a Container. We don't need the Label that's part of the standard empty template, so go ahead and remove the Label control from the Container. Since our UI uses a StackLayout to arrange controls, we add that to the top of our Container.

You must define a SystemSound object that you can use to play system sounds. We attach the SystemSound object to the main Container in our UI as an attached object. Here's what our UI looks like so far:

Page {
    Container {
        layout: StackLayout {}

        attachedObjects: [
            SystemSound {
                id: systemSound
                sound: ddlSoundSelector.selectedValue;
            }
        ]
    }
}

Add UI controls

Let's add two controls to our app's UI so we can use them to play system sounds.

Since there are many system sounds available, we use a DropDown to let the user select a system sound to play. The DropDown has the value property of each of its Option objects set to a different system sound. The selected value from our DropDown control is used to set the sound property of our SystemSound object.

There are more system sounds than the sounds shown in this sample code. We use only five system sounds in our sample code.

Let's add the DropDown to our Container:

        DropDown {
            id: ddlSoundSelector
            title: "Sound: "
            Option {
                text: "Battery Alarm"
                value: SystemSound.BatteryAlarm
                selected: true
            }
            Option {
                text: "Browser Start"
                value: SystemSound.BrowserStartEvent
            }
            Option {
                text: "Camera Shutter"
                value: SystemSound.CameraShutterEvent
            }
            Option {
                text: "Device Tether"
                value: SystemSound.DeviceTetherEvent
            }
            Option {
                text: "General Notification"
                value: SystemSound.GeneralNotification
            }
        }

The next control is a Button, whose onClicked signal handler is used to play the selected sound by calling the play() function of the SystemSound class. We add the Button below the DropDown.

        Button {
            text: "Play Selected System Sound"
            onClicked: {
                systemSound.play();
            }
        }

That's it. Build your project and try it out!

import bb.cascades 1.2
import bb.multimedia 1.2

Page {
    Container {
        layout: StackLayout {}

        attachedObjects: [
            SystemSound {
                id: systemSound
                sound: ddlSoundSelector.selectedValue;
            }
        ]

        DropDown {
            id: ddlSoundSelector
            title: "Sound: "
            Option {
                text: "Battery Alarm"
                value: SystemSound.BatteryAlarm
                selected: true
            }
            Option {
                text: "Browser Start"
                value: SystemSound.BrowserStartEvent
            }
            Option {
                text: "Camera Shutter"
                value: SystemSound.CameraShutterEvent
            }
            Option {
                text: "Device Tether"
                value: SystemSound.DeviceTetherEvent
            }
            Option {
                text: "General Notification"
                value: SystemSound.GeneralNotification
            }
        }

        Button {
            text: "Play Selected System Sound"
            onClicked: {
                systemSound.play();
            }
        }
    }
}

Last modified: 2014-11-17



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus