<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>
<link media="all" rel="stylesheet" href="/assets/css/v7_audioplayer.css">
{% 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"
}
Audioplayer component is used to play audio files.
To display an Audioplayer components use following syntax:
{% render "@audioplayer" %}