track information and progress bar doesn't work, maybe its a scope problem

[filipecrosk]

HI Guys,

I'm having some trouble to put this project to work. I don't know what's wrong, but I can't get the track information and the ion-audio-progress-bar isn't working.

Take a look at this screen record: https://cl.ly/1z0O0v273q2E

As you can see the "{{audioTrack}}" is showing correct outside the ion-audio-track component, but it's not loading inside the component.

That's my template:

{{audioTrack}}
      <ion-audio-track track="audioTrack">
        audiotrack: {{audioTrack}}
        <br>
        track: {{track}}
        <div class="list list-inset audio-player">
          <div class="item item-thumbnail-left">
              <img src="{{audioTrack.art}}">
              <h2>title: {{audioTrack.title}}</h2>
              <p>{{audioTrack.artist}}</p>
              <ion-audio-controls>
                    <a class="button button-icon icon" ion-audio-play></a>
                    <ion-spinner icon="ios"></ion-spinner>
                </ion-audio-controls>
          </div>
          <div class="item">
            <ion-audio-progress-bar track="audioTrack" display-time></ion-audio-progress-bar>
          </div>
        </div>
      </ion-audio-track>

That's my controller:

controller('SermonsDetailCtrl', function($scope, $stateParams, Sermons, $sce, $cordovaSocialSharing, $ionicLoading, MediaManager) {
  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $ionicLoading.show({
    template: 'Loading...'
  });

  Sermons.getSermon($stateParams.serieId, $stateParams.sermonId).then(function (sermon) {
    $scope.sermon = sermon;

    $scope.embedVideo = sermon.video.replace("watch?v=", "embed/");

    $scope.audioTrack = {
      url: sermon.audio,
      artist: sermon.author,
      title: sermon.title,
      art: sermon.image
    }
    $ionicLoading.hide();
  });

  $scope.stopPlayback = function() {
    MediaManager.stop();
  };
  // stop any track before leaving current view
  $scope.$on('$ionicView.beforeLeave', function() {
    MediaManager.stop();
  });

  $scope.showStudy = false;
  $scope.showAudioPlayer = false;
  $scope.showQuestions = function(){
    $scope.showStudy = !$scope.showStudy;
  }
  $scope.showContent = function(){
    $scope.showStudy = !$scope.showStudy;
  }
  $scope.showPlayer = function(){
    $scope.showAudioPlayer = !$scope.showAudioPlayer;
  }
})

Did I miss some extra configuration here?

By the way, thanks a lot @arielfaur this addon is really nice.

[mrbankim]

Hi, I am also facing same issue. The progress bar is not working for me. Can anyone plz help me out?

[arielfaur]

@filipecrosk Did you get it working? Which audio format are you trying to play?

[filipecrosk]

@arielfaur Unfortunately not yet. I was trying to play a regular mp3 file hosted on S3. I can share the code of my app if you want to test it.

[filipecrosk]

@arielfaur here is the code if you want to test: https://github.com/filipecrosk/ob1church

The template of this track is here: https://github.com/filipecrosk/ob1church/blob/master/www/templates/sermons-detail.html#L33-L48

[kwvanderlinde]

I had this issue too (assuming it's for the same reason). The problem (I believe) is that ionAudioProgressBar assigns to scope.track if scope.track is undefined. Unfortunately, if the parent scope has not yet defined this property, this will forever override the parent property. In your case, this means that, unless $scope.audioTrack exists by the time ionAudioProgressBar is loaded, your track will never be recognized by it.

I think the real solution is to rework the code for ionAudioProgressBar so that it does not assign to scope.track. In the meantime, a workaround would be to add the line $scope.audioTrack = {} to the top of your SermonsDetailCtrl.