Воспроизведение аудиоРейт не работает с AngularJS - PullRequest
Новая
       6

Воспроизведение аудиоРейт не работает с AngularJS

0 голосов
/ 28 апреля 2018

Я пытаюсь изменить скорость аудио-проигрывателя HTML5. Вот мой код: 

app.controller('HomeController', function($scope, $document, ...) {

var audioPlayer0 = $document[0].getElementById("audioPlayer0");
console.log(audioPlayer0);
audioPlayer0.playbackRate = 0.5;
console.log(audioPlayer0.playbackRate);

};

Вот лог: 

<audio controls preload=​"auto" id=​"audioPlayer0" ng-src=​"http:​/​/​audio.oxforddictionaries.com/​en/​mp3/​not_us_1.mp3">​…​</audio>​
0.5

AngularJS использует $document вместо document. getElementById подбирает правильный элемент. Значение playbackRate установлено. Но аудиоплеер продолжает играть на нормальной скорости. Есть идеи, что случилось?

1 Ответ

0 голосов
/ 23 февраля 2019

Мой аудиоплеер HMTL находится в шаблоне, и нажмите кнопку, чтобы замедлить скорость воспроизведения звука: 

<audio controls id="audioplayer{{$index}}" preload="auto" ng-src="{{pronunciation.audioFiles}}"></audio>

<div class="col-sm-1 col-md-1 col-lg-1">
      <button type="button" class="btn btn-default" ng-click="slowAudio($index)">Slow</button>
</div>

Обработчик находится в контроллере: 

$scope.slowAudio = function(index) {
  let audioplayer = 'audioplayer' + index;
  document.getElementById(audioplayer).playbackRate = 0.5;
};

Одна проблема заключалась в том, что аудиоплеер загружается позже, после загрузки страницы. Новый код ждет, пока пользователь нажмет кнопку, прежде чем обработчик запустит getElementById для поиска аудиоплеера.

Другая проблема заключается в том, что на моей странице есть как минимум три аудиоплеера для трех и более записей. id="audioplayer{{$index}}" динамически генерирует уникальный идентификатор элемента для каждого аудиоплеера. Кнопка проходит через какой аудиоплеер выбрал пользователь. Затем обработчик получает этот уникальный аудиопроигрыватель по идентификатору элемента и устанавливает playbackRate.

...