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 the audio source file is local and a supported type, click the Browse button in the field to select the file from your computer file system.
  4. By default, the audio is muted and controls are displayed to the user to allow them to unmute the audio and control playback. If the Controls property 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.
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 Sent when playback of the audio starts.
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 helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue