Button/Link
Data
Input
Miscellaneous
Multimedia
Output
Panel
Select
JSTL
Faces Core
Facelets
Extensions

alloy:audio

Audio is a UIComponent component that renders a <div> that contains an HTML5 <audio> element. It also supports graceful degradation for older browsers.

General Usage

The general usage of the component is to set the value attribute to a String audio URL. Degradation to a Flash player can be enabled via the degrade attribute (defaults to true).

Source Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:alloy="http://liferay.com/faces/alloy"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<!-- Example 1: Context-relative path to a resource via the value attribute -->
<alloy:form>
<alloy:audio styleClass="showcase-audio" contentType="audio/mp3" controls="true"
value="/resources/audios/over-the-rainbow.mp3" />
</alloy:form>
<!-- Example 2: JSF resource via the #{resource} EL keyword -->
<alloy:audio styleClass="showcase-audio" contentType="audio/ogg"
controls="true" degrade="false" value="#{resource['audios:over-the-rainbow.ogg']}">
<alloy:outputText value="#{i18n['please-visit-this-website-with-an-up-to-date-browser']}" />
</alloy:audio>
<!-- Example 3: JSF resource via the Alloy Resource component -->
<alloy:audio styleClass="showcase-audio" controls="true" degrade="false"
value="#{audioBacking.oggAudio}">
<alloy:outputText value="#{i18n['please-visit-this-website-with-an-up-to-date-browser']}" />
</alloy:audio>
<!-- Example 4: JSF resource via the library and name attributes -->
<alloy:audio styleClass="showcase-audio" controls="true" degrade="false" library="audios" name="over-the-rainbow.ogg">
<alloy:outputText value="#{i18n['please-visit-this-website-with-an-up-to-date-browser']}" />
</alloy:audio>
</ui:composition>
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
@RequestScoped
@ManagedBean
public class AudioBacking {
// Injections
@ManagedProperty(value = "#{audioService}")
private AudioService audioService;
private String encodedMp3ResourceURL;
private FacesResource oggAudio;
private List<FacesResource> audios;
public List<FacesResource> getAudios() {
return audios;
}
public String getEncodedMp3ResourceURL() throws UnsupportedEncodingException {
if (encodedMp3ResourceURL == null) {
FacesContext facesContext = FacesContext.getCurrentInstance();
Application application = facesContext.getApplication();
ResourceHandler resourceHandler = application.getResourceHandler();
Resource mp3AudioResource = resourceHandler.createResource("over-the-rainbow.mp3", "audios");
String requestPath = mp3AudioResource.getRequestPath();
ExternalContext externalContext = facesContext.getExternalContext();
String mp3ResourceURL = externalContext.encodeResourceURL(requestPath);
encodedMp3ResourceURL = URLEncoder.encode(mp3ResourceURL, "UTF-8");
}
return encodedMp3ResourceURL;
}
public FacesResource getOggAudio() {
if (oggAudio == null) {
oggAudio = new FacesResource("audios", "over-the-rainbow.ogg");
}
return oggAudio;
}
@PostConstruct
public void postConstruct() {
audios = audioService.getAllAudios();
}
public void setAudioService(AudioService audioService) {
this.audioService = audioService;
}
}
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Liferay Faces Alloy 4.1.1 + Liferay Faces Bridge Implementation 5.0.0 + Showcase Common 4.0.0 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20