Perspective - Audio
Component Palette Icon:
The UI for this component is hidden by default and is browser dependent. There is a hidden property, props.display, which can be used to display UI for this component. In the event a user is displaying the UI (props.display = true), the component will be displayed differently based on the browser in use.
Description​
An audio component, hidden by default, that Designers can use to play and pause sound clips in the browser.
Supported Audio Files​
Supported audio file types are browser dependent.
| File Type | Browser Compatibility |
|---|---|
| 3GP | Firefox for Android |
| ADTS | Firefox Available only if available on the underlying operating system's media framework. |
| FLAC | Chrome 56, Edge 16, Firefox 51, Safari 11 |
| MPEG-4 (MP4) | Chrome 3, Edge 12, Firefox, Internet Explorer 9, Opera 24, Safari 3.1 |
| Ogg | Chrome 3, Firefox 3.5, Edge 17 (desktop only), Internet Explorer 9, Opera 10.50 Edge requires Web Media Extensions to be installed. |
| QuickTime (MOV) | Only older versions of Safari, plus other browsers that supported Apple's QuickTime plugin |
| Waveform Audiofile (WAV) | Chrome 8+, Edge 12+, Firefox 4+, Opera 11.5+, Safari 4+ |
| WebM | Chrome 6, Edge 17 (desktop only), Firefox 4, Opera 10.6, Safari 14.1 (macOS), Safari 15 (iOS). Edge requires Web Media Extensions to be installed. |
Properties​
Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.
| Name | Description | Property Type |
|---|---|---|
| source | The source URL of the media file. | value: string |
| play | The play state of the media file. Toggling this property will start or pause the media file. | value: boolean |
| loop | Determines if the media file should loop after reaching the end. | value: boolean |
| volume | The percentage of maximum volume (from 0 to 100). | value: numeric |
| playbackRate | A double that represents the playback rate of the media file. | value: numeric |
| allowDownload | Determines whether the audio player allows downloading of the media file. | value: boolean |
| style | Sets a style that applies to the component. The Style menu contains all the tools for modifying text, background, margins, and borders. You can also specify a style class. | object |
Component Scripts and Events​
Further component interaction and functionality can be configured for all components through scripting and event actions. Right-click on the component or select Components from the Designer menubar to access the configuration popups for both of these options:
- Configure Events: Accesses the Event Configuration popup where you can configure actions to run in response to events to make the component dynamic. The Events Configurations page shows how to configure events and actions on a Perspective component.
- Configure Scripts: Accesses the Script Configuration popup where custom methods and message handlers can be added. The Scripting in Perspective section details scripting fundamentals, creating custom methods, and using message handlers.
The Audio component also has Component Events and Functions associated with it. See the Perspective - Audio Scripting page for more information.