angular-soundmanager2 (loop testing)

.css

ul { margin: 0; padding: 0; }
ul li { list-style: none; margin-bottom: 8px; }
hr { border: 0; border-top: solid 1px #d9d9d9; }

.html

<div ng-app="App" ng-controller="BaseCtrl as $ctrl">
	<sound-manager></sound-manager>
	<ul>
		<li ng-repeat="song in $ctrl.songs">
			<button music-player="play" add-song="song">{{ song.title }}</button>
		</li>
	</ul>
	<hr />
	<button play-all="$ctrl.songs">Play All</button>
	<button stop-music>Stop</button>
	<hr />
	<pre ng-if="currentPlaying">{{ currentPlaying | json }}</pre>
</div>

.js

console.clear();

// https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js
// https://rawgit.com/perminder-klair/angular-soundmanager2/master/dist/angular-soundmanager2.min.js

var dbsongs = function() {
	return [
		{
			id: 'one',
			title: 'Rain',
			artist: 'Drake',
			url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/rain.mp3'
		},
		{
			id: 'two',
			title: 'Walking',
			artist: 'Nicki Minaj',
			url: 'http://www.schillmania.com/projects/soundmanager2/demo/_mp3/walking.mp3'
		}
	];
}

var App = (function() {
	return angular.module('App', ['angularSoundManager']);
})();

(function(app) {
	app.config(function() {
		var debug = true;
		soundManager.setup({
			debugMode: debug,
			debugFlash: debug
		});
	});
})(App);

(function(app, soundManager, dbsongs) {
	app.controller('BaseCtrl', ['$rootScope', '$timeout', 'angularPlayer', function($root, $timeout, player) {
		
		var $ctrl = this;
		
		$ctrl.songs = dbsongs();
		
		// here, i'm also following the pattern of the library
		var nextTrack = function() {
			var current = player.getIndexByValue(soundManager.soundIDs, player.getCurrentTrack());
			var index =+ current + 1;
			return soundManager.soundIDs[index];
		}
		
		$root.$on('track:progress', function(event, data) {
			
			// at the end of the track 100% will be given
			if(data < 100) { return; }
			
			// undefined means... well nothing more to play
			if(typeof nextTrack() !== 'undefined') { return; }						
			
			// not sure yet, but... sometimes an error will apper ".length undefined"
			// $timeout(function() {
			
				// here, i'm just follow the pattern of the angular-soundmanager2.js
				player.clearPlaylist(function(data) {
					player.setCurrentTrack(null);
					player.stop();
					// as the playlist was cleaned, we need to add all over again
					for(var i = 0; i < $ctrl.songs.length; i++) {
						player.addTrack($ctrl.songs[i]);
					}
					player.play();
				});
			
			// }, 1001);
			
		});
		
	}]);
})(App, soundManager, dbsongs);