snippet/3.12.1/templates/aa115958da0c50d34968.html

   1 <div class="audio-player">
   2   <div ng-switch="$ctrl.loading">
   3     <!-- loading spinner -->
   4     <md-progress-circular
   5       ng-switch-when="true"
   6       class="md-hue-2"
   7       md-diameter="26px"
   8     ></md-progress-circular>
   9
  10     <!-- PLAY/PAUSE BUTTON -->
  11     <div
  12       ng-switch-when="false"
  13       class="play-pause-btn"
  14       ng-click="$ctrl.togglePlay()"
  15     >
  16       <span class="material-icons playPause"> {{$ctrl.playPause}} </span>
  17     </div>
  18   </div>
  19
  20   <div class="controls">
  21     <div ng-if="$ctrl.options.showCurrentTime" class="current-time">
  22       {{$ctrl.currentTime}}
  23     </div>
  24     <md-slider
  25       ng-disabled="$ctrl.loading"
  26       ng-model="$ctrl.sliderTime"
  27       ng-change="$ctrl.onSliderTimeChanged()"
  28       min="0"
  29       max="100"
  30       aria-label="blue"
  31       id="blue-slider"
  32       class="md-primary slider"
  33     >
  34     </md-slider>
  35     <span ng-if="$ctrl.options.showTotalTime" class="total-time"
  36       >{{$ctrl.totalTime}}</span
  37     >
  38   </div>
  39   <audio crossorigin ng-hide="true" preload="metadata">
  40     <source ng-src="{{$ctrl.source}}" type="{{$ctrl.type}}" />
  41   </audio>
  42 </div>