<div class="audiostoryplayer container"  id="{{uniqid}}_audiostoryplayer">
    <div id="{{uniqid}}_audiostory_slideshow_container" class="audiostory_slideshow_container" data-zoomandpan="{{audiostoryzoomandpan}}">
        <div class="audiostory_overlay" tabindex="0" role="button" aria-label="Play Audio Story">
        <button class="audiostory_play_button" aria-label="Play">▶</button>
        </div>
        {{#audiostoryimages}}
            <div class="audiostory_image_container" style="background-image: url(&quot;{{mediaurl}}&quot;);" data-entrytime="{{entrytime}}"></div>
        {{/audiostoryimages}}
    </div>
    {{#audiostorysubtitles}}
        <div id="{{uniqid}}_audiostory_caption"  class="audiostory_caption"></div>
    {{/audiostorysubtitles}}
    {{< mod_minilesson/speedyplayer}}
        {{$audioplayer}}
        <audio id="{{uniqid}}_audiostory_audio" class="audiostory_audio" controls="controls" crossorigin="anonymous" >
            <source src="{{audiostoryaudio}}">
            {{#audiostorysubtitles}}
            <track kind="subtitles" src="{{audiostorysubtitles}}" default="default">
            {{/audiostorysubtitles}}
        </audio>
        {{/audioplayer}}
    {{/ mod_minilesson/speedyplayer}}
</div>
{{^element.frozen}}
    {{#js}}
        require(['jquery', 'mod_minilesson/audiostory'], function($, audiostory) {
            var as = audiostory.clone();
            as.init('{{uniqid}}');
        });
    {{/js}}
{{/element.frozen}}