Playing external audio in ionic

Question

I have several external audio files, which I want to play in ionic app, I am using 'ng-repeat' to get all the audio files. But the problem is that the first audio that plays, the others play the same audio. In other words, if I play 'God is good by Don Moen' and move to the next file say 'Amazing love by Christ Tomlin' and try to play it, it still comes as 'God is good'. Even though I have clicked on the play button against 'Amazing love by Christ Tomlin'.

This is my controller

.controller('AudioCtrl', function($scope, $http,  $cordovaMedia, $ionicLoading, $window) {

 $scope.playNow = function(src, index){
        
        if (typeof(media) !== 'undefined') {
            media.play();
        }
        else{
            media = null;
            media = new Media(src, null, null, function(status){
                if (status == 1) {
                    $ionicLoading.show
                     $ionicLoading.show({template: 'Please Wait...'});
                    console.log('loading')
                }else if(status == 2){
                  $ionicLoading.hide();
                    console.log('running');
                }
            })
            media.play(media) 
        }
               
    }
 $scope.pauseNow = function(){
        if (typeof(media) !== 'undefined') {
            media.pause();
        };
    }

    $scope.stopNow = function () {
        if (typeof(media) !== 'undefined') {
            media.stop();
        };
    }

})

<ion-list >
            <ion-item class="item item-avatar" ng-repeat="data in datas | filter:name" >
                <div class="row">
                    <div class="col">

                        <i class="ion-pause media-player-icon" ng-click="pauseNow()"></i>

                        <i class="ion-play media-player-icon" ng-click="playNow('http://inomotech.com/mobileapp/uploads/'+'{{data.audio_name}}', {{data.id}})" id="media-play"></i>

                        <i class="ion-stop media-player-icon-stop" id="media-play" ng-click="stopNow()"></i>

                        <i class="ion-android-download media-player-icon-download"></i>

                        <div class="audio-title"> {{data.title}}</div>
                        <div class="lyric-author">~ {{data.created_at}}</div>
                    </div>
                </div>
                <br/>
            </ion-item>
        </ion-list>

I would be very grateful if some help is given, thanks.

Answer 1

A Plnkr would help but looking at your code logic, the media player will be instantiated with a Source file and after that, there is no changeover of the source.

So every time a PlayNow call is made, you need to check if Player has been instantiated (if not then instantiate the player) and change the source for the media.