如何使用 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. 我如何捕捉“结束”事件？

Answer 1

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

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

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

我希望它有帮助。