The Audio component

This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.

The Audio component lets you embed audio in your project.

To add the Audio component to your project:

  1. Open the Components panel, then the Media folder.
  2. Drag the Audio component to the stage.
  3. In the Audio properties section of the Properties panel, enter the audio file URL in the Sources field. If you want to use a local audio file, add it to the assets subfolder for your Google Web Designer project in your computer file system.
  4. To allow the user to control the audio playback, select the Show controls box. If this box is unchecked, the audio component won't be visible to the user.

Properties

Property Description
Name The component name.
Autoplay When selected, the audio plays automatically when the page loads.
Loop When selected, the audio continually repeats.
Mute When selected, the audio begins muted.
Show controls When selected, audio player controls are displayed.
Sources The audio source file URL. Multiple audio sources in different formats are allowed, separated by commas. The user's browser uses the source in a supported format. Can be bound to dynamic data.

Events and actions

Events sent by the Audio component

You can trigger other actions based on the following Audio component events:

Event Description
Play after pause Sent when playback of the audio starts after a prior pause event.
Paused Sent when playback of the audio is paused.
Playing Sent when the audio begins to play (for the first time, after having been paused, or after ending and then restarting).
Ended Sent when playback of the audio completes.
Volume change Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
Seek Sent when a seek operation completes.
Buffering Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

To select one of these events in the Event dialog, set the Audio component as the target.

Actions performed by the Audio component

The following Audio component actions can be triggered in response to other events:

  • Toggle mute
  • Pause
  • Play
  • Replay
  • Seek

When you select one of these actions in the Event dialog, set the Audio component as the receiver.

Learn how to configure events.

Preview

This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.

Was this article helpful?
How can we improve it?