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 you want to use a local audio file, add it to the
assetssubfolder for your Google Web Designer project in your computer file system.
- 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.
|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 actionsEvents sent by the Audio component
You can trigger other actions based on the following Audio component events:
|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.
The following Audio component actions can be triggered in response to other events:
- Toggle mute
When you select one of these actions in the Event dialog, set the Audio component as the receiver.
Learn how to configure events.
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.