audio.html

{% load soundfiles %}
{% load paniktags %}
{% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
	<!--
	<span class="controls audioControls" data-audio-control="Audio-{{ sound.file.url|slugify }}">
		<button class="add icon-plus">{{ sound.content_types }}</button>
		<button class="playpause icon-play">{{ sound.content_types }}</button>
		<button class="icon-eye-open" title="Show/Hidden HTML5 audio player" onclick="$('#Audio-{{ sound.file.url|slugify }}').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button>

		{% if sound|is_format_available:'ogg' %}
			<a class="icon-download" href="{{ sound.url }}"> ogg</a>
		{% endif %}
		{% if sound|is_format_available:'mp3' %}
			<a class="icon-download" href="{{ sound.url }}"> mp3</a>
		{% endif %}
	</span>
	-->

	<audio 
		data-player='true'
		title="{{episode.title}}"
		id="Audio-{{ sound.file.url|slugify }}" 
		preload="{% if preload %}{{ preload }}{% else %}none{% endif %}"
		controls="{% if controls %}{{ controls }}{% else %}controls{% endif%}"
		>
		{% if sound|is_format_available:'ogg' %}
			<source src="{{ sound|format_url:'ogg' }}" type="audio/ogg">
		{% endif %}
		{% if sound|is_format_available:'mp3' %}
			<source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
		{% endif %}
		<div class="alternative padded">
			<div class="info smooth">Your browser can't play audio files</div>
			<strong>Download: </strong>
			{% if sound|is_format_available:'ogg' %}
				<a class="icon-headphones" href="{{ sound|format_url:'ogg' }}"> ogg</a>
			{% endif %}
			{% if sound|is_format_available:'mp3' %}
				<a class="icon-headphones" href="{{ sound|format_url:'mp3' }}"> mp3</a>
			{% endif %}
		</div>
		<code class="source hidden json">
		{
			"source" :{
				"audio/ogg":{% if sound|is_format_available:'ogg' %}{{ sound|format_url:'ogg'|jsonify|safe }}{% else %}false{% endif %},	
				"audio/mpeg":{% if sound|is_format_available:'mp3' %}{{ sound|format_url:'mp3'|jsonify|safe }}{% else %}false{% endif %}						
			},
			"emission": "{{episode.slug}}",
			"episode": "{{episode.slug}}",
			"title": {{episode.title|jsonify|safe}},
			"id":"{{ sound.file.url|slugify }}"
		}
		</code>
	</audio>
	<button data-playlist-add="#Audio-{{ sound.file.url|slugify }}" class="icon-plus" id="addToPlaylist-{{ sound.file.url|slugify }}">Add to playlist</button>
{% else %}
	<div class="error">No sound available!</div>
{% endif%}