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>