angularjs从firebase的链接播放音频

Question

我在加载 html5 媒体播放器以播放来自链接 firebase 的音频 (OGG) 文件时遇到问题。

这是我的看法

<my-audio>
    <audio>
        <source id="lol" ng-src="{{msg.text}}" />
    </audio>
    <button class="play">Play Music</button>
    <button class="pause">Pause Music</button>   
</my-audio>

这是我的指令

angular.module('myApp')
.directive('myAudio', function() {
    return {
        restrict: 'E',
        link: function(scope, element, attr) {
            var player = element.children('.player')[0];
            element.children('.play').on('click', function() {

                player.play();

            });
            element.children('.pause').on('click', function() {
                player.pause();
            });
        }
    };
});

{{msg.text}} 来自 firebase 链接，例如：

https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9

Answer 1

问题在于如何按类选择元素，根据angular.element docs，.children() 不支持选择器，因此您必须以不同的方式选择它们。

例如：

var $playBtn = angular.element(element[0].getElementsByClassName('play'));

我已经使用静态Audio 对象举例说明：

angular.module('myApp', [])
  .directive('myAudio', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attr) {

        // Using a static Audio object 
        var player = new Audio('https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9');
        
        var elm = element[0],
          byClass = function(klass) {
            return angular.element(elm.getElementsByClassName(klass));
          };

        byClass('play')
          .on('click', function() {

            player.play();

          });
        byClass('pause')
          .on('click', function() {
            player.pause();
          });
      }
    };
  });

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

<my-audio>
  <button class="play">Play Music</button>
  <button class="pause">Pause Music</button>
</my-audio>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

更新添加了使用 html <audio> tag 的示例。

angular.module('myApp', [])
  .directive('myAudio', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attr) {            
        
        // Using html <audio> tag with controlls
        var player = element.find('audio')[0];
        
        var elm = element[0],
          byClass = function(klass) {
            return angular.element(elm.getElementsByClassName(klass));
          };

        byClass('play')
          .on('click', function() {

            player.play();

          });
        byClass('pause')
          .on('click', function() {
            player.pause();
          });
      }
    };
  });

angular.element(function() {
  angular.bootstrap(document, ['myApp']);
});

<my-audio>
  <audio src="https://firebasestorage.googleapis.com/v0/b/smartdev-8a133.appspot.com/o/whatsapp_media_audios%2F08CB2B0764907A3300.ogg?alt=media&token=a1b80178-2309-4ea3-b22f-b6d6aa52efd9" controls></audio>
  <button class="play">Play Music</button>
  <button class="pause">Pause Music</button>
</my-audio>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>