Hi,
I have FnL currently with only one field (Column Name: "MP3") of Data Type DOWNLOAD. The intention is to have MP3 files as records. The MP3 is by default displayed as a list and one can click for "Details" to play the MP3 using jPlayer (a jQuery Plugin -
http://www.jplayer.org/).
My problem is how to pass the "MP3_UDT_Url" as a parameter ("audioFile") for the jPlayer plugin. Where and how can I implement it?
The jPlayer Plugin Interface has the following setup in XSL for the "Detail" Template:
=====================
<xsl:template match="udt:Data" mode="detail">
<xsl:call-template name="ListView" />
<xsl:call-template name="EditLink" />
<!-- jPlayer Interface BEGIN -->
<div id="jquery_jplayer_1" class="jp-jplayer">
</div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li>
<a href="#" class="jp-play" tabindex="1">play</a>
</li>
<li>
<a href="#" class="jp-pause" tabindex="1">pause</a>
</li>
<li>
<a href="#" class="jp-stop" tabindex="1">stop</a>
</li>
<li>
<a href="#" class="jp-mute" tabindex="1">mute</a>
</li>
<li>
<a href="#" class="jp-unmute" tabindex="1">unmute</a>
</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
</div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value">
</div>
</div>
<div class="jp-current-time">
</div>
<div class="jp-duration">
</div>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<li>
<xsl:value-of select="udt:MP3" disable-output-escaping="yes" />
</li>
</ul>
</div>
</div>
</div>
<!-- jPlayer Interface END -->
<table>
<tr>
<td class="normalBold">MP3</td>
<td class="Normal">
<xsl:value-of select="udt:MP3" disable-output-escaping="yes" />
</td>
<td class="Normal">
<xsl:value-of select="udt:MP3_UDT_Url" disable-output-escaping="yes" />
</td>
</tr>
</table>
</xsl:template>
=====================
I call the jPlayer Plugin using an external script file called AudioPlayer.js that is declared on the <HEAD> tag from the Page Settings. The variable "audioFile" should hold the "MP3_UDT_Url".
=====================
(function($) {
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: $("#audioFile").text()
}).jPlayer("play");
},
ended: function (event) {
$(this).jPlayer("play");
},
swfPath: "/Portals/0/jPlayer/",
supplied: "mp3"
});
});
})(jQuery);
=====================
I tried putting the following before the "jPlayer Interface BEGIN". This is to feed the external script AudioPlayer.js with the audioFile=MP3_UDT_Url. Problem is the jPlayer Interface is NOT showing up (NOT DISPLAYED). I can hear the MP3 file play.
=====================
<div id="audioFile" style="display:none;">
<xsl:value-of select="udt:MP3_UDT_Url" disable-output-escaping="yes" />
</div>
=====================
How can I get this thing run? I would really appreciate some guidance here.
Test Site:
http://ra-duran.net.cws6.my-hosting-p...
Thanks, Olan