Sound Effects

When playing sound effects, the response time from requesting playback until actually playing becomes important. In this situation, the SoundEffect element comes in handy. By setting up the source property, a simple call to the play function immediately starts playback.

This can be utilized for audio feedback when tapping the screen, as shown below.

  1. import QtQuick
  2. import QtMultimedia
  4. Window {
  5.     width: 300
  6.     height: 200
  7.     visible: true
  9.     SoundEffect {
  10.         id: beep
  11.         source: "file:beep.wav"
  12.     }
  14.     Rectangle {
  15.         id: button
  17.         anchors.centerIn: parent
  19.         width: 200
  20.         height: 100
  22.         color: "red"
  24.         MouseArea {
  25.             anchors.fill: parent
  26.             onClicked: beep.play()
  27.         }
  28.     }
  29. }

The element can also be utilized to accompany a transition with audio. To trigger playback from a transition, the ScriptAction element is used.

The following example shows how sound effects elements can be used to accompany transition between visual states using animations:

  1. import QtQuick
  2. import QtQuick.Controls
  3. import QtMultimedia
  5. Window {
  6.     width: 500
  7.     height: 500
  8.     visible: true
  10.     SoundEffect { id: beep; source: "file:beep.wav"}
  11.     SoundEffect { id: swosh; source: "file:swosh.wav" }
  13.     Rectangle {
  14.         id: rectangle
  16.         anchors.centerIn: parent
  18.         width: 300
  19.         height: width
  21.         color: "red"
  22.         state: "DEFAULT"
  24.         states: [
  25.             State {
  26.                 name: "DEFAULT"
  27.                 PropertyChanges { target: rectangle; rotation: 0; }
  28.             },
  29.             State {
  30.                 name: "REVERSE"
  31.                 PropertyChanges { target: rectangle; rotation: 180; }
  32.             }
  33.         ]
  35.         transitions: [
  36.             Transition {
  37.                 to: "DEFAULT"
  38.                 ParallelAnimation {
  39.                     ScriptAction { script: swosh.play(); }
  40.                     PropertyAnimation { properties: "rotation"; duration: 200; }
  41.                 }
  42.             },
  43.             Transition {
  44.                 to: "REVERSE"
  45.                 ParallelAnimation {
  46.                     ScriptAction { script: beep.play(); }
  47.                     PropertyAnimation { properties: "rotation"; duration: 200; }
  48.                 }
  49.             }
  50.         ]
  51.     }
  53.     Button {
  54.         anchors.centerIn: parent
  55.         text: "Flip!"
  56.         onClicked: rectangle.state = rectangle.state === "DEFAULT" ? "REVERSE" : "DEFAULT"
  57.     }
  58. }

In this example, we want to apply a 180 rotation animation to our Rectangle whenever the “Flip!” button is clicked. We also want to play a different sound when the rectangle flips in one direction or the other.

To do so, we first start by loading our effects:

  1. SoundEffect { id: beep; source: "file:beep.wav"}
  2. SoundEffect { id: swosh; source: "file:swosh.wav" }

Then we define two states for our rectangle, DEFAULT and REVERSE, specifying the expected rotation angle for each state:

  1. states: [
  2.     State {
  3.         name: "DEFAULT"
  4.         PropertyChanges { target: rectangle; rotation: 0; }
  5.     },
  6.     State {
  7.         name: "REVERSE"
  8.         PropertyChanges { target: rectangle; rotation: 180; }
  9.     }
  10. ]

To provide between-states animation, we define two transitions:

  1. transitions: [
  2.     Transition {
  3.         to: "DEFAULT"
  4.         ParallelAnimation {
  5.             ScriptAction { script: swosh.play(); }
  6.             PropertyAnimation { properties: "rotation"; duration: 200; }
  7.         }
  8.     },
  9.     Transition {
  10.         to: "REVERSE"
  11.         ParallelAnimation {
  12.             ScriptAction { script: beep.play(); }
  13.             PropertyAnimation { properties: "rotation"; duration: 200; }
  14.         }
  15.     }
  16. ]

Notice the ScriptAction { script: swosh.play(); } line. Using the ScriptAction component we can run an arbitrary script as part of the animation, which allows us to play the desired sound effect as part of the animation.

TIP

In addition to the play function, a number of properties similar to the ones offered by MediaPlayer are available. Examples are volume and loops. The latter can be set to SoundEffect.Infinite for infinite playback. To stop playback, call the stop function.

WARNING

When the PulseAudio backend is used, stop will not stop instantaneously, but only prevent further loops. This is due to limitations in the underlying API.