Search code examples
angularjssoundmanager2

angularjs with soundmanager, update DOM on whileloading


I'm new to Angularjs, and I'm trying to create a simple player using soundManager library.

The problem i'm facing is about updating the DOM, during sound loading/playing.

The soundManager Sound object exposes some dynamic properties like bytesLoaded or position and I'm trying to figure out how to bind them to the DOM.

I tried with something like

<span ng-bind="sound.bytesLoaded"></span>

where sound is an instance of the sound object attached to the root $scope, but it seems the DOM is updated only once in this way.


Solution

  • The problem might be that the sound.bytesLoaded is updated in non-angular world like, callback function of bytes loaded or some similar callback methods which is non-angular world.

    To make the view update while updating the model value in non-angular world, you may need to call the $scope.$apply method from within the callback method of the SM2.

    Some pseudo code:

    sound.on('bytesLoaded', function(bytesLoaded){
      // Imagine you have some similar kind of the callback in SM2,
      // where you will be updating the sound.bytestLoaded property.
      sound.bytesLoaded = bytesLoaded;
      $scope.$apply(); // please make sure you call have this line
                       // where you are updating the bytesLoaded property. 
    
    })