<link media="all" rel="stylesheet" href=" /assets/css/v7_audioplayer.css">
<div data-podcast>
<audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3" preload="auto"></audio>
</div>
<script async src="//cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/js/green-audio-player.min.js" onload="window.GreenAudioPlayer&&new GreenAudioPlayer('[data-podcast]');"></script>
{# Il CSS dell'audioplayer (v7_audioplayer.scss) è stato condizionato in maniera che se ci si trova sul modello episodio podcast avrà il colore verde(come è sempre stato) #}
{# altrimenti prenderà il colore nero come si vede da preview #}
<link media="all" rel="stylesheet" href=" {%if href%}{{href}}{%endif%}">
{% if amp %}
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>
<amp-audio
width="300"
height="50"
src="{{src}}"
artwork="{{cover}}"
title="{{title}}"
artist="RomaToday"
controlslist="nodownload"
>
<div fallback>
<p>Your browser doesn’t support HTML5 audio</p>
</div>
<source type="audio/mpeg" src="{{src}}" />
</amp-audio>
{% else %}
<div data-podcast>
<audio src="{{src}}" preload="auto"></audio>
</div>
<script async src="//cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/js/green-audio-player.min.js" onload="window.GreenAudioPlayer&&new GreenAudioPlayer('[data-podcast]');"></script>
{% endif %}
{
"src": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/Swing_Jazz_Drum.mp3",
"href": "/assets/css/v7_audioplayer.css"
}
Audioplayer component is used to play audio files.
To display an Audioplayer components use following syntax:
{% render "@audioplayer" %}