AngularJS Cordova Media并不总是播放下一首歌曲

时间:2015-11-14 02:28:40

标签: javascript angularjs cordova ionic-framework

我使用带有AngularJS和ngCordova Media Plugin的Ionic Framework:http://ngcordova.com/docs/plugins/media/

我目前在我的控制器中有两个功能;

  1. 播放 - 此功能播放所选媒体src

      $scope.play = function(src) {
            media = $cordovaMedia2.newMedia(src, null, null, mediaStatusCallback);
            media.play(); 
            $scope.isPlaying = true;
            $ionicLoading.hide();
    
        }
      }
    
  2. 下一首歌 - 此功能通过查找当前歌曲对象的索引并选择列表中的下一个对象来获取列表中下一首歌曲的src。

    $scope.nextSong = function (song_id) {
            var index = $scope.allsongs.indexOf(song_id);
            if(index >= 0 && index < $scope.allsongs.length - 1) {
               $scope.nextsongid = $scope.allsongs[index + 1]
               $scope.playMusic($scope.nextsongid);  //the playMusic function just looks up the src of the song and parses to the play function
            }
    }
    
  3. 这是上面调用的playMusic函数:

        $scope.playMusic = function(music_id)
    {
        myService.getSongInfo(music_id)
        .then(function(data){
          $scope.cursong = data.results;
          $scope.play($scope.cursong.src);
        });
    };
    

    在我的模板中,下一个按钮只是使用当前歌曲ID调用nextSong函数:

    <div class="next" ng-click="nextSong('{{cursong.id}}')"></div>
    

    我面临的问题是,当我第一次按下一个按钮时,它会播放下一首歌曲但是当我再次按下它时,它会再次播放同一首歌曲。似乎&#39; currsong&#39;值未更新。

    这就是&#39; allsongs&#39;数组看起来像:

    ["1631922", "1502059", "1365874", "1607940", "1251204", "1233296", "1151847", "1119737", "1086438", "1078140", "1068172", "1065312", "845339", "799161", "316293", "306073", "299817", "1603940"]
    

    更新:我尝试使用间隔

    我有一个间隔功能,当时间到达持续时间时跳到下一首歌。我在那里调用nextsong函数,它完美无缺。

        $scope.Timer = $interval(function () {
    
    $scope.cursongduration = $scope.cursong.duration;
    $scope.cursongid = $scope.cursong.id;
    
    
    if($scope.currduration >= $scope.cursongduration){
        $scope.nextSong($scope.cursongid);
        }, 1000);
    };
    

    所以我的问题是为什么通过模板按钮调用nextSong呢?对我来说,似乎cursong.id在1次之后没有在模板中更新,原因有些奇怪。我也尝试使用cursongid变量,它在模板按钮的间隔中设置,但没有运气:

    <div class="next" ng-click="nextSong('{{cursongid}}')"></div>
    

2 个答案:

答案 0 :(得分:0)

问题不在cordova或媒体插件中,当您播放歌曲时,您必须更新$scope.cursong.id,以便下一次点击可以知道当前歌曲是什么。

$scope.play = function(src) {
        $scope.cursong.id = src;
        media = $cordovaMedia2.newMedia(src, null, null, mediaStatusCallback);
        media.play(); 
        $scope.isPlaying = true;
        $ionicLoading.hide();

    }
  }

我假设您已在脚本中的某处声明了$scope.cursong.id

答案 1 :(得分:0)

我通过创建一个新功能&#39; PlayNextSong&#39;解决了这个问题。它将$ scope.cursong.id存储到一个新范围&cursongid&#39;然后调用nextSong函数。这在我的情况下工作正常。

功能:

$scope.playNextSong = function() {

    $scope.cursongid = $scope.cursong.id;
    $scope.nextSong($scope.cursongid);

}

按钮:

<div class="next" ng-click="playNextSong()"></div>