Audio simple HTML5

panikweb_templates/templates/episodes/inline.html

@@ -16,16 +16,6 @@
 		    {{ episode.first_diffusion|date:"H:i" }}
 		</span>
 	</div>
-	{% if episode.main_sound %}
-	<!--
-	<div class="controls right">
-			{% include "includes/audio.html" with file=episode.main_sound.file %}
-	</div>
-	<div class="controls todo right">
-		<button class="symbol play">A</button><button class="symbol add">B</button>
-	</div>
-	-->
-	{% endif %}
 	<div class="logo right">
 		{% if episode.image %}
 		<img width="50" height="50" src="{{ episode.image|thumbnail:'50x50' }}"/>
@@ -45,4 +35,14 @@
 				{% endif %}
 		</a>
 	</div>
+	{% if episode.main_sound %}
+	<div class="sound">
+		{% include "includes/audio.html" with sound=episode.main_sound %}
+	</div>
+	<!--
+	<div class="controls todo right">
+		<button class="symbol play">A</button><button class="symbol add">B</button>
+	</div>
+	-->
+	{% endif %}
 </div>

panikweb_templates/templates/episodes/resume.html

@@ -62,4 +62,14 @@
 			</ul>
 		</div>
 	</div>
+	{% if episode.main_sound %}
+	<div class="sound">
+		{% include "includes/audio.html" with sound=episode.main_sound %}
+	</div>
+	<!--
+	<div class="controls todo right">
+		<button class="symbol play">A</button><button class="symbol add">B</button>
+	</div>
+	-->
+	{% endif %}
 </div>

panikweb_templates/templates/includes/audio.html

-
-{% if file.url %}
-<span class="audioControls small" data-audio-control="Audio-{{ file.url|slugify }}">
-	<button class="playpause icon-play">{{ file.content_types }}</button>
-	<a class="icon-download" href="{{ file.url }}"></a>
+{% load soundfiles %}
+{% if sound %}
+<span class="controls audioControls small" data-audio-controlNot="Audio-{{ sound.file.url|slugify }}">
+	<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>
+	<a class="icon-download" href="{{ sound.url }}"></a>
 </span>
 <audio 
-	id="Audio-{{ file.url|slugify }}" 
-	{% if preload %}preload="{{ preload }}"{% endif%}
-	class="{{ class }}" 
-	src="{{ file.url }}" 
+	id="Audio-{{ sound.file.url|slugify }}" 
+	preload="{% if preload %}{{ preload }}{% else %}false{% endif %}"
 	{% if controls %}controls="{{ controls }}"{% endif%}
 	
-	></audio>  
+	>
+		{% if episode.main_sound|is_format_available:'ogg' %}
+		dispo en ogg, 
+			<source src="{{ sound|format_url:'ogg' }}" type="audio/ogg">
+		{% endif %}
+
+		{% if episode.main_sound|is_format_available:'mp3' %}
+		dispo en mp3, 
+			<source src="{{ sound|format_url:'mp3' }}" type="audio/mpeg">
+		{% endif %}
+</audio>  
 {% else %}
 	<div class="icon-ban-circle ">No sound!</div>
 {% endif%}