#if ( !$hit )
        #set ( $hit = $asset )
    #end
## Required: path, id
## Optional: width, autostart, hit or asset (for the file name)
#set ( $urlutils = $context.getPageValue("url_util"))
#if (!$urlutils)
	#set ($urlenc = $hit.sourcepath)
#else
	#set ( $urlenc = $urlutils.encode($hit.sourcepath))
	#set ( $urlenc = $urlenc.replace("%2F", "/") )
#end


#set ($path = "$!cdn$home/${mediadbappid}/services/module/asset/downloads/preset/$urlenc/audio.mp3")   
    
        <div id="jp_container_$hit.id" class="jp-audio mini">
            <div class="jp-type-single">
                <div id="jquery_jplayer_$hit.id" data-container="jp_container_$hit.id"  class="jp-jplayer" data-url="$path"></div>            
                <div class="jp-gui jp-interface">
                   <ul class="jp-controls">
                            <li><a href="javascript:;" class="jp-play" data-target="jquery_jplayer_$hit.id" data-pause="jquery_jplayer_pause_$hit.id" id="jquery_jplayer_play_$hit.id" tabindex="1">[[]play</a></li>
                            <li><a href="javascript:;" class="jp-pause" data-target="jquery_jplayer_$hit.id" data-play="jquery_jplayer_play_$hit.id" id="jquery_jplayer_pause_$hit.id" tabindex="1">[[pause]]</a></li>
                    </ul>
                   <div class="jp-progress"  >
                        <div class="jp-seek-bar"  style="width:70px">
                            <div class="jp-play-bar" > </div>
                        </div>
                    </div>
                </div>
            </div>
            	<div id="badgecontainer">
	#set( $badges = $mediaarchive.getBadges($hit) )
	<div class="badgetarget">
	#if($canshowbadge)
		#foreach($badge in $badges)
			<span id="$badge.getId()" class="embadge $badge.getId()" style="background-image:url('$home$themeprefix/images/badges/${badge.getId()}.svg')" title="$badge.getName()"> </span>
		#end
	#end
	</div>
</div>
            
        </div>