The text announced when the layer got closed.
Its hylo-page-root translations object key is "audioAnnouncementClosed".
The delay of the announcement in millisecond.
An HTMLHyloAccessibilityAnnouncementElement component either as element or css query selection. If not set and hylo-page-root is present, it takes the announcement element from the hylo-page-root component.
Used to announce opened/closed status of the layer or replacement of the preview image/player. "announcementOpened", "announcementClosed", "announcementPlayer" and/or "announcementImage" needs to be set.
The text announced when the player got replaced with the preview image again.
Its hylo-page-root translations object key is "audioAnnouncementImage".
The text announced when the layer got opened.
Its hylo-page-root translations object key is "audioAnnouncementOpened".
The text announced when the player got added.
Its hylo-page-root translations object key is "audioAnnouncementPlayer".
The aria-label of the initial button.
Its hylo-page-root translations object key is "audioButton".
The aria-label of the initial button when displayed in a hylo-gallery.
Its hylo-page-root translations object key is "audioGallery".
Should the player start playing as soon the actual player is added/created.
Label of the close button.
Its hylo-page-root translations object key is "audioButtonLabelClose".
The tabindex of the initial button.
Comment, copyright etc. which is displayed as part of the initial button.
An alternative comment used when the player is displayed in a layer or gallery view. If not set, the original comment is used
Show player controls.
The component replaces unicode characters (\uxxxx) with html special characters in the comment automatically. This switch disables it.
Creates a preview image which spans over the whole content in which the image is placed in.
Creates a preview image with the dimensions of the screen.
Creates an preview image which spans over the whole content width in which the image is placed in.
Add a data-info-id attribute to the player button.
This can be used to hide it when showing comments via hylo-responsive-image
Classes added to the hylo-player layer.
Classes added to the hylo-player wrapper div.
Start with the player already shown, not the preview image.
Has no effect if the property "layer" is set. Should not be used when the player is part of a hylo-gallery.
If set, the preview image is loaded instantly and lazy loading is not used.
Should the player open in a layer or placed inside this component after the user clicked on it.
Label of the player layer.
Its hylo-page-root translations object key is "audioLayerLabel".
Label of the end marker of the player layer.
Its hylo-page-root translations object key is "audioLayerLabelEnd".
Label of the start marker of the player layer.
Its hylo-page-root translations object key is "audioLayerLabelStart".
Tries to determine what kind of source (soundcould or spotify) got provided.
Loop the playback.
Is the playback muted.
Label of the actual HTML5 player. The "comment" is added to it.
Its hylo-page-root translations object key is "audioPlayerLabel".
A url to a podigee audio file.
No other source should be provided.
The preview image is provided by a nested hylo-responsive-image component.
The hylo-audio component is not creating a hylo-responsive-image component on its own but is looking for one in its child components.
All preview image related properties have no meaning.
On default, the component is not showing a hylo-accessibility-focus border when it gains focus by click, only when tabbed into it. This property disables the default.
A url to a soundcloud audio file.
No other source should be provided.
A url to a spotify audio file.
No other source should be provided.
The path to the audio file. Creates a HTML5 player element.
To provide multiple source files, separate the paths by a space character or provide HTMLSourceElements as children.
Overwrites provided HTMLSourceElements when defined.
The type of the src.
To provide multiple types for multiple source files, separate the types by a space character. If fewer types than source files are defined, the last defined type will become the default type for the left source files.
Fired when either the preview image got replaced with the player or the player got created in a layer.
It returns the resource's type of the player: hosted: The player got created by providing a src attribute. soundcloud: The player got created by providing a soundcloud link. spotify: The player got created by providing a spotify link. podigee: The player got created by providing a podigee link.
Fired when the player got replaced with the preview image again or the player layer got closed.
Generated using TypeDoc
An audio player component.
Creates a hylo-responsive-image inside the component as preview image. After click on the component (initial button) the player is either replacing the preview image or is opening in a layer.
Define the preview image by placing hylo-image components inside this component. Is the component supposed to be part of a hylo-gallery, mark at least one hylo-image with "gallery". If the component is part of a gallery, a mouse click on the component will open the gallery and a keyboard activation (click) will trigger the original action (replacing/layer).
You can add "track" elements beside the hylo-image components to provide subtitles or captions and "source" elements to provide video source files.
Use the slot "controls" to add a custom controls component.
Uses a hylo-accessibility-focus component to show the focus of the initial button.
Slots: