4

我在 JavaScript 中有一个简单的实现，可以连续播放播放列表中的歌曲直到结束。我一直无法找到在 AngularJS 中实现它的正确方法。本练习应解决所需的功能：

  • 将播放器封装为服务
  • 我需要使用指令来访问控件吗？
  • 赶上“结束”事件开始新歌

这是 HTML 文件的摘录。

...
<div class="span4">
  <button class="btn btn-large btn-primary" type="button" ng-click="startPlaying();">Start Playing</button>
</div>
...
<div class="span6">
  <h4 id="NowPlayingID">Now Playing: </h4>
  <audio id="AudioPlayerID" controls="controls">
  </audio>
</div>
...

<!-- OLD JavaScript code -->
<script type="text/javascript">
  function playNextSong(player) {
    if (playlist.currentSongIX >= playlist.songs.length) 
        return;
    $('#NowPlayingID').text('Now Playing: ' + playlist.songs[playlist.currentSongIX].name);
    player.src = playlist.songs[playlist.currentSongIX].path;
    player.play();
    playlist.currentSongIX++;
  }
  function startPlaying() {
    var player = document.getElementById("AudioPlayerID");
    player.addEventListener('ended', function() {
        playNextSong(player);
        }, false);
    playNextSong(player);
  };
</script>

以下代码正在进行中且不完整：

app.controller('PlayCtrl', function($scope, $routeParams, Playlist, $log, $document) {
  $scope.playlist = Playlist.get({playlistID:$routeParams.playlistID});
  var player = ????? ("AudioPlayerID");
  $scope.startPlaying = function () {
      angular.forEach($scope.playlist.songs, function(song) {
  $log.log("Playing: " + song.name);
  player.src = song.path;
  player.play();
      });
  };
});

...

我的问题是：

  1. 访问音频播放器的正确方法是什么？
  2. 我需要使用指令吗？
  3. 如何捕捉“结束”事件？
4

1 回答 1

2

我已经构建了一个由 flash 支持的 html 播放器来播放音乐，所以构建我自己的事件流来操作，但我认为最好的方法是编写一个指令来做到这一点。在这种情况下，您可以根据需要重新使用该指令，并且效果很好。

如果您将播放器对象放入指令中，则可以正常捕获所有事件。

看看这个网站：Angular Tunes并查看源代码，看看他做了什么。这和你试图做的一样。

我希望它有所帮助。

于 2013-07-19T02:26:25.533 回答