  <div class='poodll_onceplayer'>
    <button type='button'  id='{{AUTOID}}' class='poodll_onceplayer_button'>
        <audio id='{{AUTOID}}_player' class="onceplayerjs nomediaplugin" src="{{VIDEOURL}}"></audio><i class="fa fa-play fa-2x" aria-hidden="true"></i>
    </button>
    <!-- div id='@@AUTOID@@_slider' class='poodll_onceplayer_slider' -->
    <div id='{{AUTOID}}_time' class='poodll_onceplayer_time'></div>
    <div id='{{AUTOID}}_progress' class='poodll_onceplayer_progress'>
      <div id='{{AUTOID}}_progress_inner' class='poodll_onceplayer_progress_inner'></div>
    </div>
    <div id='{{AUTOID}}_state' class='poodll_onceplayer_state'></div>
  </div>   


{{#js}}
 require(['jquery','filter_poodll/mediaparser'], function($,parser) {

    //time display function
    function poodll_op_sec2time(seconds){
       var date = new Date(null);
       date.setSeconds(seconds);
       return date.toISOString().substr(11, 8);
    }
    function poodll_op_fetchtime(theplayer){
      var a_currenttime= isNaN(theplayer[0].currentTime) ? 0 : theplayer[0].currentTime;
      var a_duration= isNaN(theplayer[0].duration) ? 0 : theplayer[0].duration;
      var currenttime = poodll_op_sec2time(Math.floor(a_currenttime));
      var totaltime = poodll_op_sec2time(Math.floor(a_duration));
      var displaytime = currenttime + ' / ' +  totaltime;
      return displaytime;
    }

    //get our player
    var aplayer = $('#{{AUTOID}}').children().first();
    var fa = $('#{{AUTOID}} .fa');
    var thestate =$('#{{AUTOID}}_state');
    var thetime = $('#{{AUTOID}}_time');

    //The timer display
    aplayer.on('timeupdate',function(e){
      var displaytime = poodll_op_fetchtime(aplayer)
      thetime.text(displaytime);
    });

    //show current time
    thetime.text(poodll_op_fetchtime(aplayer));

    //set status
    thestate.text('- {{#str}}ready,filter_poodll{{/str}} -');
    
    //fetch the media url
    var details = parser.parse('{{AUTOID}}_original', 'audio');
    aplayer.attr('src',details.mediaurl); 
    

    //set player ended event
    aplayer[0].addEventListener('ended', function(){
      aplayer[0].pause();
      $(fa).removeClass('{{playing}}');
      $(fa).removeClass('fa-spin');
      $(fa).removeClass('{{play}}');
      $(fa).addClass('{{over}}');
      thestate.text('- {{#str}}finished,filter_poodll{{/str}} -');
    });

    //player clicked event
    $('#{{AUTOID}}').click(function(){
      if(aplayer[0].ended){
        return;
      }
      if(!aplayer[0].paused && {{canpause}} != '0'){
        aplayer[0].pause();
        thestate.text('- {{#str}}paused,filter_poodll{{/str}} -');
        $(fa).removeClass('{{playing}}');
        $(fa).removeClass('fa-spin');
        $(fa).addClass('{{play}}');
      }else if(aplayer[0].paused || !aplayer[0].playing){
        aplayer[0].play();
        thestate.text('- playing -');
        $(fa).removeClass('{{play}}');
        $(fa).addClass('{{playing}}');
        $(fa).addClass('fa-spin');
      }
    });

    aplayer.bind('durationchange',function(){thetime.text(poodll_op_fetchtime(aplayer));});

 });
{{/js}}
