时间戳

首页 > 解决方案 > 音频播放速率不适用于 AngularJS

angularjs - 音频播放速率不适用于 AngularJS

问题描述

我正在尝试更改 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">​…​&lt;/audio>​
0.5

AngularJS 使用$document而不是document. getElementById正在挑选正确的元素。的值playbackRate已设置。但音频播放器继续以正常速度播放。知道有什么问题吗？

标签： angularjshtml5-audio

解决方案

我的 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.

推荐阅读