Here's an HTML5 Audio Custom Control for XPages (HTML_Audio.xsp):
The above HTML5 Audio Element is the result of the following HTML_Audio.xsp Custom Control configuration:
<xc:HTML_Audio
noHTML5="Your browser does not support the audio tag."
controls="controls">
<xc:this.source>
<xc:source
type="audio/mp3"
src="http://www.notesability.com/takingnotes/TakingNotesEpisode153.mp3">
</xc:source>
</xc:this.source>
</xc:HTML_Audio>This use of the HTML5_Audio.xsp Custom Control generates the following HTML markup:
Finally, let's take a look at the HTML5_Video.xsp Custom Control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">
<audio
autoplay="#{compositeData.autoplay}"
controls="#{compositeData.controls}"
loop="#{compositeData.loop}"
preload="#{compositeData.preload}">
<xp:repeat value="#{compositeData.source}" var="sourceitem">
<source src="#{sourceitem.src}" type="#{sourceitem.type}" />
</xp:repeat>
<xp:text styleClass="noHTML5" themeId="noHTML5" value="#{compositeData.noHTML5}" />
</audio>
</xp:view>This XPages Custom Control gives you the ability to autoplay, loop, and preload the audio, enable/disable the player controls, and even provide a "Sorry, you're using Internet Explorer..." message for those stuck with an outdated corporate image for this HTML5 Audio Element.