javascript - 在ionic中播放外部音频

Question

我有几个外部音频文件，我想在 ionic 应用程序中播放，我正在使用“ng-repeat”来获取所有音频文件。但问题是第一个播放的音频，其他播放相同的音频。换句话说，如果我播放 Don Moen 的“God is good”并转到下一个文件说“Christ Tomlin 的 Amazing Love”并尝试播放它，它仍然是“God is good”。即使我点击了“Christ Tomlin 的奇妙爱情”的播放按钮。

这是我的 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>

如果能提供一些帮助，我将不胜感激，谢谢。

Answer 1

Plnkr 会有所帮助，但查看您的代码逻辑，媒体播放器将使用源文件实例化，此后，没有源的转换。

因此每次调用 PlayNow 时，您都需要检查播放器是否已实例化(如果未实例化播放器)并更改媒体源。