Как я могу воспроизвести несколько аудиоклипов с angularjs? Могу ли я выбрать файл из моего HTML?

0

Новый для углового и кодирования, я пытаюсь создать сайт, который может воспроизводить несколько коротких аудиоклипов с угловыми. В попытке обрезать мой контроллер, я сначала все мои аудиофайлы, хранящиеся в сервисе, например:

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 секунды, поэтому мне не нужно беспокоиться о каких-либо других элементах управления, кроме игры.

  • 0
    Используете ли вы список select или какой-либо checkbox для отображения параметров всех клипов?
  • 0
    Макет представляет собой предложение с кнопкой после него. Кнопка воспроизводит аудиоклип всего предложения, а нажатие на отдельные слова воспроизводит аудиоклип этого слова. По крайней мере, это конечная цель.
Теги:
audio

1 ответ

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 файл работает именно так, как я хочу.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню