Wie kann ich kontrollieren, eine HTML5-audio-player mit AngularJS?

Habe ich eine einfache Implementierung in JavaScript, spielt songs aus einer Wiedergabeliste kontinuierlich, bis es endet.
Ich habe nicht in der Lage gewesen, um herauszufinden, welche ist die richtige Art und Weise zu implementieren, die es in AngularJS. Diese übung sollte die Adresse der gewünschten features:

• Kapseln Spieler als service
• Brauche ich Richtlinien für die Zugriffssteuerung?
• Fangen die "end" - Veranstaltung zu Beginn des neuen song

Hier ist ein Auszug der HTML-Datei.

...
<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>

---

Folgende code ist work in progress und unvollständig:

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();
      });
  };
});

...

Meine Fragen sind:

1. Das ist der richtige Weg, um Zugriff auf die audio-player?
2. Brauche ich Direktiven?
3. Wie fange ich das 'Ende' Ereignis?

Dank

InformationsquelleAutor Julio | 2013-07-18