音频完成后隐藏按钮

Question

我想在音频文件完成后立即隐藏暂停按钮。 我不知道为什么这段代码不起作用。

播放按钮开始。然后，当音频播放时，音频按钮变为暂停按钮。但暂停按钮会在音频播放完毕后保留。

我的错误是什么？

<audio id="audio">
  <source src="../audio/audio.mp3" type="audio/mpeg">
</audio>
<img ng-click="playAudio()" src="../audio/play.jpg" alt="" ng-hide="!pause">
<img ng-click="pauseAudio()" src="../audio/pause.jpg" alt="" ng-hide="pause">

和控制器：

  .controller('AudioCtrl', function($scope, $http) {

  var vid = document.getElementById("audio");
  vid.onended = function() {
    $scope.pause = true;

  };
  $scope.pause = true;

  $scope.playAudio = function() {
      vid.play();
      $scope.pause = false;
  }

  $scope.pauseAudio = function() {
      vid.pause();
      $scope.pause = true;
  }

})

Answer 1

$apply() 用于从 Angular 框架外部执行 Angular 表达式。 （例如来自浏览器DOM events、setTimeout、XHR 或第三方库）。因为我们正在调用 Angular 框架，所以我们需要执行正确的 scope life cycle 或 exception handling、executing watches。

VideoElement.onended 没有在Angular 的上下文中被调用。如果您想在angular-context 之外更改model，您应该通过手动调用$apply() 来通知角度更改。

这就像告诉 Angular 你正在更改一些 models，它应该触发 watchers 以便你的更改正确传播。 Reference

vid.onended = function() {
  $scope.$apply(function() {
    console.log('Here');
    $scope.pause = true;
  });
};

Answer 2

你可以试试：

  .controller('AudioCtrl', function($scope, $http, $timeout) {

  var vid = document.getElementById("audio");
  vid.onended = function() {
    $timeout(function(){
       $scope.pause = true;
    }, 0);
  };