angularjs play audio from a link from firebase

Question

I'm facing a problem to load a html5 media player to play audio (OGG) file from a link firebase.

Here's my view

<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>

Here's my directive

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}} comes from a firebase link, example:

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

The problem is on how you select the elements by class, according to angular.element docs, .children() doesn't support selector, therefore you have to select them in a different way.

For example:

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

I've made an example using a static Audio object to exemplify:

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>

UPDATE Added example using 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>