4

プレイリストの曲を終了するまで継続的に再生する 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. 「終了」イベントをキャッチするにはどうすればよいですか?
4

1 に答える 1

2

音楽を再生するためにフラッシュをバックエンドとする html プレーヤーを作成したので、操作への独自のイベント フローを作成しましたが、それを行うためのディレクティブを作成するのが最善の方法だと思います。この場合、必要に応じてディレクティブを再利用でき、非常にうまく機能します。

ディレクティブにプレーヤー オブジェクトがある場合は、すべてのイベントを正常にキャッチできます。

この Web サイトを見てみましょう: Angular Tunesとソースをチェックして、彼が何をしているかを確認してください。やろうとしているのと同じです。

お役に立てば幸いです。

于 2013-07-19T02:26:25.533 に答える