Question

角度和编码的新手，我正在尝试构建一个可以使用angularjs播放多个短音频剪辑的网站。为了减少我的控制器，我首先将所有音频文件存储在如下服务中：

service('audioService', function() {
  this.clip1 = new Audio(pathtofile);
  this.clip2 = new Audio(pathtofile);
  etc
});

然后我在我的主控制器中：

$scope.audioFiles = audioService;
$scope.audioPlay = function(clip) {
  clip.play();
};

最后，我正试图通过以下方式播放我的音频文件：

ng-click="audioPlay(audioFiles.clip1)"

但是这一切都返回了一个错误，我正在尝试错误地访问DOM节点，这个事实告诉我并不完全理解。我认为（过去几个小时尝试了几种配置）当我从控制器内部将audioFiles.clip1传送到函数时，能够播放音频，但我似乎无法从html中选择文件。我想这样做是因为最后的项目正在播放来自多个html“幻灯片”的这些简短的音频片段。我正在使用ng-view进行调整。它们都是1-3秒，所以除了游戏之外我不需要担心任何其他控制。

Answer 1

所以我想我弄明白了。我把我的$ scope.audioPlay拉成了一个单独的播放器服务。该服务看起来像这样：

dojo.factory('player', function(audio, $rootScope) {
var player = {

    play: function(clip) {
        audio.src = clip;
        audio.play();
        player.playing = true;
    },
    stop: function() {
        if (player.playing) {
            audio.pause();
            player.playing = false;
            player.current = null;
        }
    }
};
audio.addEventListener('ended', function() {
    $rootScope.$apply(player.stop());
});
return player;
});

然后我将$ scope.audioPlay设置为player.play，将我的音频文件服务和我的播放器服务注入我的控制器。现在我的html文件完全按照我想要的方式工作。

如何使用angularjs播放多个音频片段？我可以从我的HTML中选择文件吗？

1 个答案: