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: 0

: 00:00

volume: 100%

00:00/00:00

#	Artist	Title
1	U2	One
2	Nirvana	Smells Like Teen Spirit
3	Eminem	My Name is
4	Radiohead	Creep
5	Oasis	Live Forever
6	Eagles	Hotel California
7	Led Zeppelin	Stairway to Heaven
8	Pink Floyd	Another Brick in the Wall
9	Beatles	Come Together
10	Derek and the Dominos	Layla

player status in realtime

  
    mediaPlayer = {
      playing: false
      currentTrack: 0
      tracks: 10
      volume: 1
      formatDuration: 00:00
      duration: 
      currentTime: 0
      formatTime: 00:00
      loadPercent: 0
    };

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>