With my MusicPlayer.js Angular service, I have a callback function that updates a specific object (musicPlayer.currentPlaybackTime) and is shared among all controllers by using $rootScope.$apply. However, I am aware of the potential issue of polluting the $rootScope and I am exploring different options to refactor this code without relying on apply methods to $rootScope but still allowing the updated object to be accessible across multiple controllers.
After conducting some research, it seems like I will need to register the other controllers (such as PlayerDashboardCtrl.js, PlaylistCtrl.js, and AlbumListCtrl.js) that require access to my currentPlaybackTime object. I am interested in finding the most efficient way to accomplish this task.
Thank you for your assistance.
var setSong = function(song) {
currentBuzzObject = new buzz.sound(song.audioUrl, {
formats: ['mp3'],
preload: true
});
currentBuzzObject.bind('timeupdate', function() {
$rootScope.$apply(function() {
musicPlayer.currentPlaybackTime = currentBuzzObject.getTime();
});
});
musicPlayer.currentSong = song;
};