CODEWITHSUNDEEP
javascriptangularjs
beek
beek

Reputation: 3750

Angular Play Button not update on audio complete

Strange issue

 <button  ng-show="scene.audio" class="button icon {{scene.audioIcon}}" 
ng-click="playAudio(scene)"/>
   $scope.playAudio = function ($scene){

    if($scene.audioIcon == "ion-ios-play-outline") {
      $scene.audioIcon = "ion-ios-pause-outline";
      media = new Media($scene.audio.src,function(){
        **$scene.audioIcon = "ion-ios-play-outline";**
        media.stop();
        media.release();
      },null);
      media.scene = $scene;
      media.play();
    }
    else if(media){
      media.stop();
      media.release();
      $scene.audioIcon = "ion-ios-play-outline";
    }

I can update the $scene.audioIcon on the 2 click functions, which updates the button in the UI. However in the onComplete function of new Media, this function is called when the audio is finished, and the $scene audio icon changes, however it doesn't get updated in the UI.

I assume because it comes later?

Is there a way I can trigger an update of the button?

Upvotes: 1

Views: 71

Answers (1)

obe
obe

Reputation: 7788

angularjs doesn't know that it should check for changes because the completion event is called from native code. You should wrap your code in $scope.$apply().

Something like that:

media = new Media($scene.audio.src,function() {
    $scope.$apply(function() {
        $scene.audioIcon = "ion-ios-play-outline";
        media.stop();
        media.release();
    });
},null);

Upvotes: 2

Related Questions