<div class="videogular-container bg-light lter">
  <videogular 
    vg-player-ready="onPlayerReady" 
    vg-complete="onComplete" 
    vg-theme="config.theme.url"  
    vg-autoplay="config.autoPlay" 
    class="videogular-container audio">
    <vg-audio vg-src="config.sources"></vg-audio>
    <vg-controls>
      <vg-button ng-show="audios.length-1" ng-click="play('prev')"><i class="fa fa-backward"></i></vg-button>
      <vg-play-pause-button></vg-play-pause-button>
      <vg-button ng-show="audios.length-1" ng-click="play('next')"><i class="fa fa-forward"></i></vg-button>
      <vg-timedisplay class="hidden-xs">{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
      <vg-scrubBar>
        <vg-title class="hidden-xs">{{config.title}}</vg-title>
        <vg-scrubbarcurrenttime class="bg-info" style="height: 4px"></vg-scrubbarcurrenttime>
      </vg-scrubBar>
      <vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
       
      <vg-button ng-click="toggleShuffle()" title="Shuffle"><i class="fa fa-random" ng-class="{'text-info':config.shuffle}"></i></vg-button>
      <vg-button ng-click="toggleRepeat()" title="Repeat"><i class="fa fa-retweet" ng-class="{'text-info':config.repeat}"></i></vg-button>

      <vg-volume>
        <vg-mutebutton></vg-mutebutton>
      </vg-volume>
    </vg-controls>
  </videogular>
</div>