<script type="text/javascript">
(function($){
    $(document).ready(function(){
        $("#af_player_{{fileno}}").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    {{filetype}}: "{{url}}"
                });
            },
            solution: "html, flash",
            swfPath: "/static/js",
            cssSelectorAncestor: "#jp_interface_{{fileno}}",
            supplied: "{{filetype}}"
         }).jPlayer("load")
           .bind($.jPlayer.event.play, function() { 
                // Using a jPlayer event to avoid both jPlayers playing together.
                $(this).jPlayer("pauseOthers");
         });
    });
})(jQuery || django.jQuery);
</script>
<div class="jp-audio">
    <div class="jp-type-single">
        <div id="af_player_{{fileno}}" class="jp-jplayer"></div>
        <div id="jp_interface_{{fileno}}" 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_{{fileno}}" class="jp-playlist">
            <ul>
                <li>{{name}}</li>
            </ul>
        </div>

    </div>
</div>


