如何使用 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並查看來源，看看他做了什么。 這和你試圖做的一樣。

我希望它有幫助。