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 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'll create the app shown in the image to the right using two controls. A 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 left 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 new Cascades project using the Standard empty project template.

This tutorial assumes that you've created a Cascades project, and have it open in the Momentics IDE. If you haven't already done so, go ahead and create a Cascades project in the Momentics IDE.

For more information on creating a new project, see Create your first Cascades app.

You must define a SystemSound object that you can use to play system sounds. Since there are many system sounds available, we used a DropDown to let the user select a system sound to play. The selected value from our DropDown control is then used to set the sound property of our SystemSound object. Here's a QML code sample showing the SystemSound object definition.

Page {
    Container {
        // ...

        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. The two UI controls include a DropDown that's used to select a system sound, and a Button whose onClicked signal handler is used to play the selected sound by making a call to the play() function of the SystemSound class.

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

Here's a QML code sample that shows you how to play system sounds using a DropDown and a Button. As you can see, the DropDown has the value property of each of its Option objects set to a different system sound, and the Button uses the SystemSound object to play the sound that's selected from the DropDown.

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: 2013-12-20

comments powered by Disqus