我有一个使用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();
});
};
});
我的问题是:
- 访问音频播放器的正确方式是什么?
- 我需要使用指令吗?
- 如何捕获“end”事件?