如何使用AngularJS控制HTML5音频播放器？

Question

我有一个使用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. 如何捕获“end”事件？

- Julio

Answer 1

我已经构建了一个由Flash支持的HTML播放器来播放音乐，因此我构建了自己的事件流以执行操作，但我认为最好的方法是编写指令来完成。在这种情况下，如果需要，您可以重复使用该指令，并且它非常有效。

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

请查看此网站：Angular Tunes并查看源代码以了解他的做法。这与您正在尝试的相同。

希望能对您有所帮助。

- Deividi Cavarzan

---

Angular Tunes网站终于为我提供了一些很好的信息，并帮助我嵌入控制器中的代码并在服务部分定义audioControl。下一步是弄清楚如何使用指令。 - Julio

如果你需要帮助，只需将 plunker 或 jsfiddle 发送给我 =) - Deividi Cavarzan

这并没有回答问题。 - Tjorriemorrie