title: How do I control an HTML5 audio player with AngularJS?
body: <p>I have a simple implementation in JavaScript that plays songs from a playlist continuously until it ends.
  I have not been able to find which is the proper way to implement it in AngularJS. This exercise should address the desired features:</p>
  
  <ul>
  <li>Encapsulate player as a service</li>
  <li>Do I need to use directives to access the control?</li>
  <li>Catch the "end" event to start the new song</li>
  </ul>
  
  <p>Here is an excerpt of the HTML file.</p>
  
  <pre><code>...
  &lt;div class="span4"&gt;
    &lt;button class="btn btn-large btn-primary" type="button" ng-click="startPlaying();"&gt;Start Playing&lt;/button&gt;
  &lt;/div&gt;
  ...
  &lt;div class="span6"&gt;
    &lt;h4 id="NowPlayingID"&gt;Now Playing: &lt;/h4&gt;
    &lt;audio id="AudioPlayerID" controls="controls"&gt;
    &lt;/audio&gt;
  &lt;/div&gt;
  ...
  
  &lt;!-- OLD JavaScript code --&gt;
  &lt;script type="text/javascript"&gt;
    function playNextSong(player) {
      if (playlist.currentSongIX &gt;= 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);
    };
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>The following code is work in progress and incomplete:</p>
  
  <pre><code>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();
        });
    };
  });
  </code></pre>
  
  <p>...</p>
  
  <p>My questions are:</p>
  
  <ol>
  <li>Which is the proper way to access the audio player?</li>
  <li>Do I need to use directives?</li>
  <li>How do I catch the 'end' event?</li>
  </ol>