ng-repeat on a playlist

Iterating over the playlist object shouldn't be any different than any other array.

Interact

Click on the tracks below to play them, in this example only one <audio> tag gets used, the ng-repeat is used on the playlist, not on the <audio> tag.

Simple Play

currentTrack: [[ mediaPlayer.currentTrack ]]

: [[ mediaPlayer.formatTime ]]

volume: [[ mediaPlayer.volume * 100 | number:0 ]]%

[[ mediaPlayer.formatTime ]]/[[ mediaPlayer.formatDuration ]]

#	Artist	Title
[[ $index+1 ]]	[[ song.artist ]]	[[ song.title ]]

player status in realtime

  
    mediaPlayer = {
      playing: [[ mediaPlayer.playing ]]
      currentTrack: [[ mediaPlayer.currentTrack ]]
      tracks: [[ mediaPlayer.tracks ]]
      volume: [[ mediaPlayer.volume ]]
      formatDuration: [[ mediaPlayer.formatDuration ]]
      duration: [[ mediaPlayer.duration ]]
      currentTime: [[ mediaPlayer.currentTime ]]
      formatTime: [[ mediaPlayer.formatTime ]]
      loadPercent: [[ mediaPlayer.loadPercent ]]
    };

Code

...you can inspect aswell!

angular.module('docs')
// Taken from http://en.wikipedia.org/wiki/List_of_songs_considered_the_best
// Thanks again, wikipedia.
.constant('top100SongsEver', [
  { url: 'http://upload.wikimedia.org/wikipedia/en/5/5e/U2_One.ogg', displayName: 'U2 - One' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/6/6c/NirvanaSmellsLikeTeenSpirit.ogg', displayName: 'Nirvana - Smells Like Teen Spirit' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/b/be/My_Name_Is.ogg', displayName: 'Eminem - My Name is' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/c/c4/Radiohead_-_Creep_%28sample%29.ogg', displayName: 'Radiohead - Creep' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/6/64/OasisLiveForever.ogg', displayName: 'Oasis - Live Forever' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/6/65/Eagles_-_Hotel_California.ogg', displayName: 'Eagles - Hotel California' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/c/cb/Stairway_to_Heaven_3_sections.ogg', displayName: 'Led Zeppelin - Stairway to Heaven' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/c/cb/Pink_floyd_another_brick_in_the_wall_part_2.ogg', displayName: 'Pink Floyd - Another Brick in the Wall' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/d/d0/Beatles_cometogether.ogg', displayName: 'Beatles - Come Together' },
  { url: 'http://upload.wikimedia.org/wikipedia/en/d/db/Layla_sample_1.ogg', displayName: 'Derek and the Dominos - Layla' }
])
.controller('RepeatController', function ($scope, top100SongsEver) {
  $scope.audioPlaylist = top100SongsEver.map(function (song, index, array) {
    var parseTitle = song.displayName.match(/(.*?)\s?-\s?(.*)?$/);
    return { src: song.url, type: 'audio/ogg', artist: parseTitle[1], title: parseTitle[2] };
  });
});

Template for this page


<table class="table table-hover table-rounded table-cursor">
  <thead>
    <th>#</th>
    <th>Artist</th>
    <th>Title</th>
  </thead>
  <tbody>
    <tr ng-repeat="song in audioPlaylist" ng-click="mediaPlayer.playPause($index)" ng-class="{ active: mediaPlayer.playing && mediaPlayer.currentTrack-1 === $index }">
      <td>{{ $index+1 }}</td>
      <td>{{ song.artist }}</td>
      <td>{{ song.title }}</td>
    </tr>
  </tbody>
</table>