使用 PRIMEFACES 点击按钮播放 mp3？答案

【问题标题】：Play mp3 with button click with PRIMEFACES?使用 PRIMEFACES 点击按钮播放 mp3？
【发布时间】：2014-07-10 05:54:17
【问题描述】：

我想通过单击带有 primefaces 的按钮来播放媒体 mp3，可以吗？我尝试更新媒体标签但不起作用，当页面加载时声音播放得很好，但我想在点击事件后再次发出声音

    <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>

【问题讨论】：

标签： java javascript jsf primefaces

【解决方案1】：

唯一明显的方法是使用 javascript。

在 quicktime 插件上启用 javascript 控件（用于旧版浏览器支持）

<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>

在按钮的onclick中调用quicktime播放器上的Play方法

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

对我来说，这不是一个理想的解决方案。如果您愿意，我建议您利用 HTML5（和 JSF 2.2）中提供的新 <audio/> 标签

【讨论】：

【解决方案2】：

当您使用 p:media 时，该组件没有关联的生成 ID。您要做的是将 p:media 包装在容器上，例如 h:panelGrid。你会得到以下信息：

<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>

我使用 PF5.0 对此进行了测试，并且可以正常工作。

【讨论】：