music.player.html 1.3 KB

12345678910111213141516171819202122232425262728
  1. <div class="videogular-container bg-light lter">
  2. <videogular
  3. vg-player-ready="onPlayerReady"
  4. vg-complete="onComplete"
  5. vg-theme="config.theme.url"
  6. vg-autoplay="config.autoPlay"
  7. class="videogular-container audio">
  8. <vg-audio vg-src="config.sources"></vg-audio>
  9. <vg-controls>
  10. <vg-button ng-show="audios.length-1" ng-click="play('prev')"><i class="fa fa-backward"></i></vg-button>
  11. <vg-play-pause-button></vg-play-pause-button>
  12. <vg-button ng-show="audios.length-1" ng-click="play('next')"><i class="fa fa-forward"></i></vg-button>
  13. <vg-timedisplay class="hidden-xs">{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
  14. <vg-scrubBar>
  15. <vg-title class="hidden-xs">{{config.title}}</vg-title>
  16. <vg-scrubbarcurrenttime class="bg-info" style="height: 4px"></vg-scrubbarcurrenttime>
  17. </vg-scrubBar>
  18. <vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
  19. <vg-button ng-click="toggleShuffle()" title="Shuffle"><i class="fa fa-random" ng-class="{'text-info':config.shuffle}"></i></vg-button>
  20. <vg-button ng-click="toggleRepeat()" title="Repeat"><i class="fa fa-retweet" ng-class="{'text-info':config.repeat}"></i></vg-button>
  21. <vg-volume>
  22. <vg-mutebutton></vg-mutebutton>
  23. </vg-volume>
  24. </vg-controls>
  25. </videogular>
  26. </div>