javascript 如何使用 AngularJS 控制 HTML5 音频播放器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17733208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I control an HTML5 audio player with AngularJS?
提问by Julio
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:
我在 JavaScript 中有一个简单的实现，可以连续播放播放列表中的歌曲直到播放结束。我一直无法找到在 AngularJS 中实现它的正确方法。此练习应解决所需的功能：
- Encapsulate player as a service
- Do I need to use directives to access the control?
- Catch the "end" event to start the new song
- 将播放器封装为服务
- 我是否需要使用指令来访问控件？
- 抓住“结束”事件开始新歌
Here is an excerpt of the HTML file.
这是 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>
The following code is work in progress and incomplete:
以下代码正在进行中且不完整：
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();
});
};
});
...
...
My questions are:
我的问题是：
- Which is the proper way to access the audio player?
- Do I need to use directives?
- How do I catch the 'end' event?
- 访问音频播放器的正确方法是什么？
- 我需要使用指令吗？
- 我如何捕捉“结束”事件？
采纳答案by Deividi Cavarzan
I've build a html player backended by flash to play music, so build my own event flow to to the operations, but I think that the best way is to write an directive to do that. In this case you can re-use the directive if you need to and it works very well.
我已经构建了一个由 Flash 支持的 html 播放器来播放音乐，所以构建我自己的事件流来执行操作，但我认为最好的方法是编写一个指令来做到这一点。在这种情况下，您可以根据需要重新使用该指令，并且它运行良好。
If you have the player object into your directive, you can catch all events normally.
如果您将玩家对象放入指令中，则可以正常捕获所有事件。
Take a look on this website: Angular Tunesand check out the sources to see what he does. It's the same as you trying to do.
看看这个网站：Angular Tunes并查看来源以了解他的工作。这和你试图做的一样。
I hope it helps.
我希望它有帮助。
