Robust Playlist #2

Editing the playing track while it's playing, simply makes it pause, and load the new track(s) on fly.

Interact

To test out this functionality, play the pre-loaded track, and then push the swap button.
You can track changes in the playlist below.

Simple Play

currentTrack: [[ mediaPlayer.currentTrack ]]

: [[ mediaPlayer.formatTime ]]

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

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

Swap Track

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('SwapController', function ($scope, $timeout) {
  var oasis = { src: 'http://upload.wikimedia.org/wikipedia/en/6/64/OasisLiveForever.ogg', type: 'audio/ogg'},
      beatles = { src: 'http://upload.wikimedia.org/wikipedia/en/d/d0/Beatles_cometogether.ogg', type: 'audio/ogg'};

  $scope.audioPlaylist = [oasis];
  $scope.swapSong = function () {
    if (angular.equals($scope.audioPlaylist[0], oasis)) {
      $scope.audioPlaylist[0] = beatles;
    } else {
      $scope.audioPlaylist[0] = oasis;
    }
  };
});