Play mp3 with button click with PRIMEFACES?

Question

i want to play a media mp3 by clicking a button with primefaces, it is possible? i try to update the media tag but doesn't work, when the page load the sound plays great, but i want to sound again after click event

    <h:form>
        <p:commandButton value="play" update="media"/>

        <p:media id="media" value="/resources/sounds/ding.mp3" player="quicktime" style="visibility: hidden;">
                <f:param name="autoPlay" value="true" />
        </p:media>
   </h:form>

Answer 1

The only apparent way is with javascript.

1. Enable javascript control on the quicktime plugin (for older browser support)

    <p:media id="media" value="/resources/sounds/ding.mp3" player="quicktime" style="visibility: hidden;"> <f:param name="autoPlay" value="true" /> <f:param name="enablejavascript" value="true"/> </p:media> 

2. call the Play method on the quicktime player in the onclick of the button

    <p:commandButton onclick="document.media.Play();" value="play" update="media"/> 

This, to me, is not an ideal solution. If you were open to it, I'd recommend taking advantage of the new <audio/> tag available in HTML5 (and JSF 2.2)

Answer 2

When you use ap:media, there's no associated generated id for this component. What you want to do is to wrap your p:media on a container, such as an h:panelGrid. You get the following:

<h:form>
  <p:commandButton value="play" update="mediaPanel"/>
  <h:panelGrid id="mediaPanel">
    <p:media id="media" value="/resources/sounds/ding.mp3" player="quicktime"
          style="visibility: hidden;">
      <f:param name="autoPlay" value="true" />
    </p:media>
  </h:panelGrid>
<h:form>

I tested this using PF5.0 and it works.