AngularJS中HTML5 Audio的playbackRate属性不生效问题求助

我帮你分析下这个问题：从你的日志来看，已经成功获取到了audio元素，并且playbackRate的值也被设置成了0.5，但实际播放时没有生效，大概率是设置时机不对导致的——你在控制器初始化时就设置了播放速度，但此时音频可能还没完成元数据加载，浏览器还没准备好应用这个参数。

给你几个可行的解决方案：

方案1：监听音频的loadedmetadata事件 #

这个事件会在音频的元数据（比如时长、编码信息等）加载完成后触发，此时设置播放速度才会被浏览器正确应用：

app.controller('HomeController', function($scope, $document) { 
  var audioPlayer0 = $document[0].getElementById("audioPlayer0"); 
  console.log(audioPlayer0); 

  // 监听元数据加载完成事件，只执行一次
  audioPlayer0.addEventListener('loadedmetadata', function() {
    audioPlayer0.playbackRate = 0.5;
    console.log('实际生效的播放速度:', audioPlayer0.playbackRate);
  }, { once: true });
});

方案2：监听ng-src的动态变化（如果音频地址是动态绑定的） #

如果你的音频地址是通过AngularJS的ng-src动态赋值的，还可以监听src的变化，确保资源加载后再设置播放速度：

app.controller('HomeController', function($scope, $document) { 
  var audioPlayer0 = $document[0].getElementById("audioPlayer0"); 

  // 监听audio元素的src属性变化
  $scope.$watch(function() {
    return audioPlayer0.src;
  }, function(newSrc) {
    // 当src有有效值时，等待元数据加载完成
    if (newSrc) {
      audioPlayer0.addEventListener('loadedmetadata', function() {
        audioPlayer0.playbackRate = 0.5;
        console.log('播放速度设置完成');
      }, { once: true });
    }
  });
});

额外注意点 #

• 确认你的浏览器支持HTML5音频的playbackRate属性：目前Chrome、Firefox、Safari等主流浏览器都支持，但如果是非常老旧的浏览器可能会有兼容性问题。
• 如果是在音频播放过程中调整速度，直接设置playbackRate就会即时生效，但初始化时必须等音频准备好才行。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe