This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads, or image ads.
The Audio component lets you embed audio in your project.
To add the Audio component to your project:
- Open the Components panel, then the Media folder.
- Drag the Audio
component to the stage.
- 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.
- 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 componentYou 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.
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.
