Question

我正在尝试更改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的值。但音频播放器继续以正常速度播放。知道什么是错的吗？

Answer 1

我的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}}"为每个音频播放器动态生成唯一的元素ID。该按钮将通过用户选择的音频播放器。然后，处理程序通过元素ID获取该唯一的音频播放器，并设置playbackRate。

音频播放率不适用于AngularJS

1 个答案: