Robust Playlist

Simulates playlist population from time to time.

What happens

Every 5seconds a new mediaElement gets added into the playlist.
Generally those gets added through events (ex: user clicks and adds a track)

You can notice the currentTrack property changing when a track gets added in front of the playlist.
It goes from currentTrack: 1 to currentTrack: 2 without interrupting playback, thus making the information always consistent.

Simple Play

currentTrack: [[ mediaPlayer.currentTrack ]]

: [[ mediaPlayer.formatTime ]]

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

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

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 ]]
    };

Keep track of changes to $scope.audioPlaylist in realtime


  audioPlaylist: [[ audioPlaylist | json ]]

Code

...you can inspect aswell!

angular.module('docs')
.controller('ProgressiveController', function ($scope, $timeout) {
  $scope.audioPlaylist = [];
  $scope.audioPlaylist.push({
    src: 'http://upload.wikimedia.org/wikipedia/en/7/79/Korn_-_Predictable_%28demo%29.ogg',
    type: 'audio/ogg'
  });
  $timeout(function () {
    $scope.audioPlaylist.unshift({
      src: 'http://upload.wikimedia.org/wikipedia/en/0/0c/Wiz_Khalifa_-_Black_and_Yellow.ogg',
      type: 'audio/ogg'
    });
  }, 5500);
  $timeout(function () {
    $scope.audioPlaylist.push({
      src: 'http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/demo-audio.ogg',
      type: 'audio/ogg'
    });
  }, 9500);
});