md-player-audio.partial.html 1.2 KB

123456789101112131415161718192021222324252627282930
  1. <md-card layout="column">
  2. <div ng-transclude=""></div>
  3. <md-toolbar class="md-toolbar-sm">
  4. <div class="text-center" class="md-toolbar-tools">
  5. <h2 style="font-size: 24px;">Audio Player</h2>
  6. </div>
  7. </md-toolbar>
  8. <md-list layout="column">
  9. <md-virtual-repeat-container style="height: 250px">
  10. <md-list-item md-virtual-repeat="track in audio.tracks" md-start-index="audio.selectedIndex"
  11. ng-click="audio.setTrack($index, true)">
  12. <p>
  13. {{$index+1}}. {{track.title}}
  14. </p>
  15. <div class="text-right md-secondary">
  16. {{track.duration | mdWavesurferTimeFormat}}
  17. </div>
  18. <md-divider ng-if="$index < audio.tracks.length-1"></md-divider>
  19. </md-list-item>
  20. </md-virtual-repeat-container>
  21. </md-list>
  22. <md-wavesurfer-player
  23. url="{{audio.currentTrack.src}}#{{audio.selectedIndex}}"
  24. title="{{audio.selectedIndex+1}}. {{audio.currentTrack.title}}"
  25. extra-buttons="audio.extraButtons"
  26. properties="audio.playerProperties"
  27. >
  28. </md-wavesurfer-player>
  29. </md-card>