javascript - 音频结束后隐藏按钮

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 :

  .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() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches.

VideoElement.onended 未在 Angular 上下文中调用。如果你想在 angular-context 之外更改 model，你应该通过手动调用 $apply() 通知 Angular 有关更改.

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

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